Canvas

1. 概念

画布，通过画笔绘制几何图形、文本、路径和位图等

2. 常用API类型

分为 绘制，变换，状态保存和恢复

2.1 绘制几何图形，文本，位图等

//在指定坐标绘制位图
void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

//根据给定的起始点和结束点之间绘制连线
void drawLine(float startXm, float startYm, float stopX, float stopY, Paint paint)

//根据给定的path，绘制连线
void drawPath(Path path, Paint paint)

//根据给定的坐标，绘制点
void drawPoint(float x, float y, Paint paint)

//根据给定的坐标，绘制文字
void drawText(String text, int start, int end, Paint paint)

2.2 位置，形状变换等

//平移操作
void translate(float dx, float dy)

//缩放操作
void scale(float sx, float sy)

//旋转操作
void rotate(float degrees)

//倾斜操作
void skew(float sx, float sy)

//切割操作，参数指定区域内可以继续绘制
void clipXXX(...)

//反向切割操作，参数指定区域内不可以绘制
void clipOutXXX(...)

//可通过matrix实现平移，缩放，旋转等操作
void setMatrix(Matrix matrix)

详解：

2.2.1 平移操作

canvas.drawRect(0, 0, 400, 400, mPaint);
canvas.translate(50, 50);
mPaint.setColor(Color.GRAY);
canvas.drawRect(0, 0, 400, 400, mPaint); //灰色矩形框左上顶点坐标为（50，50）

平移效果1
平移后坐标图示意图

2.2.2 缩放操作

canvas.drawRect(200, 200, 700, 700, mPaint);
canvas.scale(0.5f, 0.5f);//效果1

//会translate(px, py),再scale(sx, sy),再反向translate(-px, -py)
canvas.scale(0.5f, 0.5f, 200, 200);//效果2
//即 等同于
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);  

缩放效果1
缩放效果2

2.2.3 旋转操作

canvas.translate(50, 50);
canvas.drawRect(0, 0, 700, 700, mPaint);
canvas.rotate(45);//效果1 按(0, 0)坐标为圆心 顺时针旋转！
mPaint.setColor(Color.GRAY);
canvas.drawRect(0, 0, 700, 700, mPaint);  

canvas.drawRect(400, 400, 900, 900, mPaint);
canvas.rotate(45, 650, 650);//效果2 按(650, 650)坐标为圆心 顺时针旋转！
mPaint.setColor(Color.GRAY);
canvas.drawRect(400, 400, 900, 900, mPaint);

旋转效果1
旋转效果2

2.2.4 倾斜操作

canvas.drawRect(0, 0, 400, 400, mPaint);
canvas.skew(1, 0);//效果1 在x方向倾斜45度(y轴逆时针旋转45度) sx代表tan(degree)的值
canvas.skew(0, 1);//效果2 在y方向倾斜45度(x轴顺时针旋转45度)
mPaint.setColor(Color.GRAY);
canvas.drawRect(0, 0, 400, 400, mPaint);

倾斜效果1
倾斜效果2

2.2.5 切割操作

canvas.drawRect(200, 200, 700, 700, mPaint);
mPaint.setColor(Color.GRAY);
canvas.drawRect(200, 800, 700, 1300, mPaint);
canvas.clipRect(200, 200, 700, 700); //效果1 画布被裁减
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); //效果2 画布裁减外的区域有效
canvas.drawCircle(100, 100, 100, mPaint); //坐标区域在裁减范围外，绘制成功
canvas.drawCircle(300, 300, 100, mPaint); //坐标区域在裁剪区域内，无法绘制

切割效果1
切割效果2

2.2.6 矩阵Matrix

canvas.drawRect(0, 0, 700, 700, mPaint);
Matrix matrix = new Matrix();
matrix.setTranslate(50, 50); //同translate效果1
matrix.setRotate(45);
matrix.setScale(0.5f, 0.5f);
canvas.Matrix(matrix); //效果1
mPaint.setColor(Color.GRAY);
canvas.drawRect(0, 0, 700, 700, mPaint);

2.3 状态保存和恢复

Canvas调用了translate，scale，rotate，skew，clipRect等变换后，后续的操作都是基于变换后的Canvas，都会受到影响，杜宇后续的操作很不方便。为此，Canvas提供了save，saveLayer，saveLayerAlpha，restore，restoreToCount来保存和恢复状态。

2.3.1 save restore

canvas.drawRect(200, 200, 700, 700, mPaint);
canvas.save(); //不用考虑save之后的变形，在适当时机restore即可恢复canvas坐标系状态
canvas.translate(50, 50);

mPaint.setColor(Color.GRAY);
canvas.drawRect(0, 0, 500, 500, mPaint);
canvas.restore(); //可多次调用，每次返回到上一个save的状态，但调用次数多于save次数则会报错
//canvas.getSaveCount()可获取，默认为1，save加1，restore减1
//canvas.restoreToCount(int state)返回到某个状态，int state = canvas.save();
canvas.drawLine(0, 0, 400, 500, 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);

状态保存效果1
状态保存效果2

例：1.粒子爆炸效果 2.旋转扩散水波纹效果