Canvas
1. 概念
畫布，通過畫筆繪制幾何圖形、文本、路徑和位圖等
2. 常用API類型
分為 繪制，變換，狀態(tài)保存和恢復(fù)
2.1 繪制幾何圖形，文本，位圖等
//在指定坐標(biāo)繪制位圖
void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
//根據(jù)給定的起始點和結(jié)束點之間繪制連線
void drawLine(float startXm, float startYm, float stopX, float stopY, Paint paint)
//根據(jù)給定的path，繪制連線
void drawPath(Path path, Paint paint)
//根據(jù)給定的坐標(biāo)，繪制點
void drawPoint(float x, float y, Paint paint)
//根據(jù)給定的坐標(biāo)，繪制文字
void drawText(String text, int start, int end, Paint paint)
2.2 位置，形狀變換等
//平移操作
void translate(float dx, float dy)
//縮放操作
void scale(float sx, float sy)
//旋轉(zhuǎn)操作
void rotate(float degrees)
//傾斜操作
void skew(float sx, float sy)
//切割操作，參數(shù)指定區(qū)域內(nèi)可以繼續(xù)繪制
void clipXXX(...)
//反向切割操作，參數(shù)指定區(qū)域內(nèi)不可以繪制
void clipOutXXX(...)
//可通過matrix實現(xiàn)平移，縮放，旋轉(zhuǎn)等操作
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); //灰色矩形框左上頂點坐標(biāo)為（50，50）
平移效果1
平移后坐標(biāo)圖示意圖
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 旋轉(zhuǎn)操作
canvas.translate(50, 50);
canvas.drawRect(0, 0, 700, 700, mPaint);
canvas.rotate(45);//效果1 按(0, 0)坐標(biāo)為圓心 順時針旋轉(zhuǎn)！
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)坐標(biāo)為圓心 順時針旋轉(zhuǎn)！
mPaint.setColor(Color.GRAY);
canvas.drawRect(400, 400, 900, 900, mPaint);
旋轉(zhuǎn)效果1
旋轉(zhuǎn)效果2
2.2.4 傾斜操作
canvas.drawRect(0, 0, 400, 400, mPaint);
canvas.skew(1, 0);//效果1 在x方向傾斜45度(y軸逆時針旋轉(zhuǎn)45度) sx代表tan(degree)的值
canvas.skew(0, 1);//效果2 在y方向傾斜45度(x軸順時針旋轉(zhuǎn)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); //坐標(biāo)超出裁剪區(qū)域，無法繪制
canvas.drawCircle(300, 300, 100, mPaint); //坐標(biāo)區(qū)域在裁減范圍內(nèi)，繪制成功
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 畫布裁減外的區(qū)域有效
canvas.drawCircle(100, 100, 100, mPaint); //坐標(biāo)區(qū)域在裁減范圍外，繪制成功
canvas.drawCircle(300, 300, 100, mPaint); //坐標(biāo)區(qū)域在裁剪區(qū)域內(nèi)，無法繪制
切割效果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 狀態(tài)保存和恢復(fù)
Canvas調(diào)用了translate，scale，rotate，skew，clipRect等變換后，后續(xù)的操作都是基于變換后的Canvas，都會受到影響，杜宇后續(xù)的操作很不方便。為此，Canvas提供了save，saveLayer，saveLayerAlpha，restore，restoreToCount來保存和恢復(fù)狀態(tài)。
2.3.1 save restore
canvas.drawRect(200, 200, 700, 700, mPaint);
canvas.save(); //不用考慮save之后的變形，在適當(dāng)時機(jī)restore即可恢復(fù)canvas坐標(biāo)系狀態(tài)
canvas.translate(50, 50);
mPaint.setColor(Color.GRAY);
canvas.drawRect(0, 0, 500, 500, mPaint);
canvas.restore(); //可多次調(diào)用，每次返回到上一個save的狀態(tài)，但調(diào)用次數(shù)多于save次數(shù)則會報錯
//canvas.getSaveCount()可獲取，默認(rèn)為1，save加1，restore減1
//canvas.restoreToCount(int state)返回到某個狀態(tài)，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);
//由于平移操作，導(dǎo)致繪制的矩形超出了圖層的大小，所以繪制不完全
canvas.drawRect(0, 0, 700, 700, mPaint);
canvas.restoreToCount(layerId);
mPaint.setColor(Color.RED);
canvas.drawRect(0, 0, 100, 100, mPaint);
狀態(tài)保存效果1
狀態(tài)保存效果2
例：1.粒子爆炸效果 2.旋轉(zhuǎn)擴(kuò)散水波紋效果
