Canvas的使用
1.画布变化操作，对Canvas移动后，坐标系发生变化
// //1，平移操作
// canvas.drawRect(0,0, 400, 400, mPaint);
// canvas.translate(50, 50);
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(0,0, 400, 400, mPaint);
// canvas.drawLine(0, 0, 600,600, mPaint);
// //缩放操纵
// canvas.drawRect(200,200, 700,700, mPaint);
//// canvas.scale(0.5f, 0.5f);
// //先translate(px, py),再scale(sx, sy),再反响translate
// //canvas.scale(0.5f, 0.5f, 200,200);
//
// canvas.translate(200, 200);
// canvas.scale(0.5f, 0.5f);
// canvas.translate(-200, -200);
//
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(200,200, 700,700, mPaint);
// canvas.drawLine(0,0, 400, 600, mPaint);
// //旋转操作
// canvas.translate(50,50);
// canvas.drawRect(0,0, 700,700, mPaint);
// canvas.rotate(45);
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(0,0, 700,700, mPaint);
// canvas.drawRect(400, 400, 900, 900, mPaint);
// canvas.rotate(45, 650, 650); //px, py表示旋转中心的坐标
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(400, 400, 900, 900, mPaint);
// //倾斜操作
// canvas.drawRect(0,0, 400, 400, mPaint);
//// canvas.skew(1, 0); //在X方向倾斜45度,Y轴逆时针旋转45
// canvas.skew(0, 1); //在y方向倾斜45度， X轴顺时针旋转45
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(0, 0, 400, 400, mPaint);
//切割
// canvas.drawRect(200, 200,700, 700, mPaint);
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(200, 800,700, 1300, mPaint);
// canvas.clipRect(200, 200,700, 700); //画布被裁剪
// canvas.drawCircle(100,100, 100,mPaint); //坐标超出裁剪区域，无法绘制
// canvas.drawCircle(300, 300, 100, mPaint); //坐标区域在裁剪范围内，绘制成功
// canvas.drawRect(200, 200,700, 700, mPaint);
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(200, 800,700, 1300, mPaint);
// canvas.clipOutRect(200,200,700,700); //画布裁剪外的区域
// canvas.drawCircle(100,100,100,mPaint); //坐标区域在裁剪范围内，绘制成功
// canvas.drawCircle(300, 300, 100, mPaint);//坐标超出裁剪区域，无法绘制
//矩阵
canvas.drawRect(0,0,700,700, mPaint);
Matrix matrix = new Matrix();
// matrix.setTranslate(50,50);
// matrix.setRotate(45);
matrix.setScale(0.5f, 0.5f);
canvas.setMatrix(matrix);
mPaint.setColor(Color.GRAY);
canvas.drawRect(0,0,700,700, mPaint);
2.画布状态保持和恢复
/**
* 1.canvas内部对于状态的保存存放在栈中
* 2.可以多次调用save保存canvas的状态，并且可以通过getSaveCount方法获取保存的状态个数
* 3.可以通过restore方法返回最近一次save前的状态，也可以通过restoreToCount返回指定save状态。指定save状态之后的状态全部被清除
* 4.saveLayer可以创建新的图层，之后的绘制都会在这个图层之上绘制，直到调用restore方法
* 注意：绘制的坐标系不能超过图层的范围， saveLayerAlpha对图层增加了透明度信息
*/
// Log.e("", "onDraw: "+canvas.getSaveCount());
// canvas.drawRect(200, 200, 700, 700, mPaint);
// int state = canvas.save();
// Log.e("", "onDraw: "+canvas.getSaveCount());
// canvas.translate(50,50);
//
// mPaint.setColor(Color.GRAY);
// canvas.drawRect(0,0,500,500, mPaint);
//
// canvas.save();
// Log.e("", "onDraw: "+canvas.getSaveCount());
// canvas.translate(50,50);
// mPaint.setColor(Color.BLUE);
// canvas.drawRect(0,0,500,500, mPaint);
//
//
//// canvas.restore();
// Log.e("", "onDraw: "+canvas.getSaveCount());
//// canvas.restore();
// canvas.restoreToCount(state);
//
//// canvas.restore();
// Log.e("", "onDraw: "+canvas.getSaveCount());
// canvas.drawLine(0,0, 400,500, mPaint);
canvas.drawRect(200,200, 700,700, mPaint);
int layerId = canvas.saveLayer(0,0, 700, 700, mPaint);
mPaint.setColor(Color.GRAY);
Matrix matrix = new Matrix();
matrix.setTranslate(100,100);
canvas.setMatrix(matrix);
canvas.drawRect(0,0,700,700, mPaint); //由于平移操作，导致绘制的矩形超出了图层的大小，所以绘制不完全
canvas.restoreToCount(layerId);
mPaint.setColor(Color.RED);
canvas.drawRect(0,0,100,100, mPaint);
3.粒子效果
/**
* 粒子封装对象
*/
public class Ball {
public int color; //图片像素点颜色值
public float x; //粒子圆心坐标x
public float y; //粒子圆心坐标y
public float r; //粒子半径
public float vX;//粒子运动水平方向速度
public float vY;//粒子运动垂直方向速度
public float aX;//粒子运动水平方向加速度
public float aY;//粒子运动垂直方向加速度
}
public class SplitView extends View {
private Paint mPaint;
private Bitmap mBitmap;
private float d = 3;//粒子直径
private ValueAnimator mAnimator;
private List
public SplitView(Context context) {
this(context, null);
}
public SplitView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SplitView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
mPaint = new Paint();
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.pic);
for (int i = 0; i < mBitmap.getWidth(); i++) {
for (int j = 0; j < mBitmap.getHeight(); j++) {
Ball ball = new Ball();
ball.color = mBitmap.getPixel(i,j);
ball.x = i * d + d/ 2;
ball.y = j * d + d/ 2;
ball.r = d / 2;
//速度(-20,20)
ball.vX = (float) (Math.pow(-1, Math.ceil(Math.random() * 1000)) * 20 * Math.random());
ball.vY = rangInt(-15, 35);
//加速度
ball.aX = 0;
ball.aY = 0.98f;
mBalls.add(ball);
}
}
mAnimator = ValueAnimator.ofFloat(0,1);
mAnimator.setRepeatCount(-1);
mAnimator.setDuration(2000);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
updateBall();
invalidate();
}
});
}
private int rangInt(int i, int j) {
int max = Math.max(i, j);
int min = Math.min(i, j) - 1;
//在0到(max - min)范围内变化，取大于x的最小整数 再随机
return (int) (min + Math.ceil(Math.random() * (max - min)));
}
private void updateBall() {
//更新粒子的位置
for (Ball ball : mBalls) {
ball.x += ball.vX;
ball.y += ball.vY;
ball.vX += ball.aX;
ball.vY += ball.aY;
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(500,500);
for (Ball ball : mBalls) {
mPaint.setColor(ball.color);
canvas.drawCircle(ball.x, ball.y, ball.r, mPaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN){
//执行动画
mAnimator.start();
}
return super.onTouchEvent(event);
}
4. 小球旋转等待-> 聚合-> 扩散-> 水波纹展示内容
public class SplashView extends View {
//旋转圆的画笔
private Paint mPaint;
//扩散圆的画笔
private Paint mHolePaint;
//属性动画
private ValueAnimator mValueAnimator;
//背景色
private int mBackgroundColor = Color.WHITE;
private int[] mCircleColors;
//表示旋转圆的中心坐标
private float mCenterX;
private float mCenterY;
//表示斜对角线长度的一半,扩散圆最大半径
private float mDistance;
//6个小球的半径
private float mCircleRadius = 18;
//旋转大圆的半径
private float mRotateRadius = 90;
//当前大圆的旋转角度
private float mCurrentRotateAngle = 0F;
//当前大圆的半径
private float mCurrentRotateRadius = mRotateRadius;
//扩散圆的半径
private float mCurrentHoleRadius = 0F;
//表示旋转动画的时长
private int mRotateDuration = 1200;
public SplashView(Context context) {
this(context, null);
}
public SplashView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mHolePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mHolePaint.setStyle(Paint.Style.STROKE);
mHolePaint.setColor(mBackgroundColor);
mCircleColors = context.getResources().getIntArray(R.array.splash_circle_colors);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mCenterX = w * 1f / 2;
mCenterY = h * 1f / 2;
mDistance = (float) (Math.hypot(w, h) / 2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mState == null){
mState = new RotateState();
}
mState.drawState(canvas);
}
private SplashState mState;
private abstract class SplashState{
abstract void drawState(Canvas canvas);
}
//1.旋转
private class RotateState extends SplashState{
private RotateState(){
mValueAnimator = ValueAnimator.ofFloat(0, (float) (Math.PI *2));
mValueAnimator.setRepeatCount(2);
mValueAnimator.setDuration(mRotateDuration);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentRotateAngle = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new MerginState();
}
});
mValueAnimator.start();
}
@Override
void drawState(Canvas canvas) {
//绘制背景
drawBackground(canvas);
//绘制6个小球
drawCircles(canvas);
}
}
private void drawCircles(Canvas canvas) {
float rotateAngle = (float) (Math.PI *2 / mCircleColors.length);
for (int i = 0; i < mCircleColors.length; i++) {
// x = r * cos(a) + centX;
// y = r * sin(a) + centY;
float angle = i * rotateAngle + mCurrentRotateAngle;
float cx = (float) (Math.cos(angle) * mCurrentRotateRadius + mCenterX);
float cy = (float) (Math.sin(angle) * mCurrentRotateRadius + mCenterY);
mPaint.setColor(mCircleColors[i]);
canvas.drawCircle(cx, cy, mCircleRadius, mPaint);
}
}
private void drawBackground(Canvas canvas){
if (mCurrentHoleRadius > 0){
//绘制空心圆
float strokeWidth = mDistance - mCurrentHoleRadius;
float radius = strokeWidth / 2 + mCurrentHoleRadius;
mHolePaint.setStrokeWidth(strokeWidth);
canvas.drawCircle(mCenterX,mCenterY, radius, mHolePaint);
}else{
canvas.drawColor(mBackgroundColor);
}
}
//2.扩散聚合
private class MerginState extends SplashState{
private MerginState(){
mValueAnimator = ValueAnimator.ofFloat(mCircleRadius, mRotateRadius);
// mValueAnimator.setRepeatCount(2);
mValueAnimator.setDuration(mRotateDuration);
mValueAnimator.setInterpolator(new OvershootInterpolator(10f));
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentRotateRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new ExpandState();
}
});
mValueAnimator.reverse();
}
@Override
void drawState(Canvas canvas) {
drawBackground(canvas);
drawCircles(canvas);
}
}
//3.水波纹
private class ExpandState extends SplashState{
public ExpandState() {
mValueAnimator = ValueAnimator.ofFloat(mCircleRadius, mDistance);
// mValueAnimator.setRepeatCount(2);
mValueAnimator.setDuration(mRotateDuration);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentHoleRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimator.start();
}
@Override
void drawState(Canvas canvas) {
drawBackground(canvas);
}
}
}