自定義控件系列的讀書筆記，整理自下列資料，不代表博主個人觀點 ：
五、畫布操作
為什么要有畫布操作？畫布操作可以幫助我們用更加容易理解的方式制作圖形。
例如： 從坐標(biāo)原點為起點，繪制一個長度為20dp，與水平線夾角為30度的線段怎么做？按照我們通常的想法(被常年訓(xùn)練出來的數(shù)學(xué)思維)，就是先使用三角函數(shù)計算出線段結(jié)束點的坐標(biāo)，然后調(diào)用drawLine即可。然而這是否是被固有思維禁錮了？假設(shè)我們先繪制一個長度為20dp的水平線，然后將這條水平線旋轉(zhuǎn)30度，則最終看起來效果是相同的，而且不用進(jìn)行三角函數(shù)計算，這樣是否更加簡單了一點呢？合理的使用畫布操作可以幫助你用更容易理解的方式創(chuàng)作你想要的效果，這也是畫布操作存在的原因。
PS: 所有的畫布操作都只影響后續(xù)的繪制，對之前已經(jīng)繪制過的內(nèi)容沒有影響。
5.1 位移(translate)
translate是坐標(biāo)系的移動，可以為圖形繪制選擇一個合適的坐標(biāo)系。 請注意，位移是基于當(dāng)前位置移動，而不是每次基于屏幕左上角的(0,0)點移動，如下：
// 在坐標(biāo)原點繪制一個黑色圓形
mPaint.setColor(Color.BLACK);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);
// 在坐標(biāo)原點繪制一個藍(lán)色圓形
mPaint.setColor(Color.BLUE);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);
我們首先將坐標(biāo)系移動一段距離繪制一個圓形，之后再移動一段距離繪制一個圓形，兩次移動是可疊加的。
5.2 縮放(scale)
縮放提供了兩個方法，如下：
public void scale (float sx, float sy)
public final void scale (float sx, float sy, float px, float py)
這兩個方法中前兩個參數(shù)是相同的分別為x軸和y軸的縮放比例。而第二種方法比前一種多了兩個參數(shù)，用來控制縮放中心位置的。（可以理解為翻轉(zhuǎn)和縮放坐標(biāo)軸，比較形象）
縮放比例(sx,sy)取值范圍詳解：
| 取值范圍(n) | 說明 |
|---|---|
| [-∞, -1) | 先根據(jù)縮放中心放大n倍，再根據(jù)中心軸進(jìn)行翻轉(zhuǎn) |
| -1 | 根據(jù)縮放中心軸進(jìn)行翻轉(zhuǎn) |
| (-1, 0) | 先根據(jù)縮放中心縮小到n，再根據(jù)中心軸進(jìn)行翻轉(zhuǎn) |
| 0 | 不會顯示，若sx為0，則寬度為0，不會顯示，sy同理 |
| (0, 1) | 根據(jù)縮放中心縮小到n |
| 1 | 沒有變化 |
| (1, +∞) | 根據(jù)縮放中心放大n倍 |
如果在縮放時稍微注意一下就會發(fā)現(xiàn)縮放的中心默認(rèn)為坐標(biāo)原點,而縮放中心軸就是坐標(biāo)軸，如下：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,-400,400,0); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.scale(0.5f,0.5f); // 畫布縮放
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
接下來我們使用第二種方法讓縮放中心位置稍微改變一下，如下：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,-400,400,0); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.scale(0.5f,0.5f,200,0); // 畫布縮放 <-- 縮放中心向右偏移了200個單位
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
前面兩個示例縮放的數(shù)值都是正數(shù)，按照表格中的說明，當(dāng)縮放比例為負(fù)數(shù)的時候會根據(jù)縮放中心軸進(jìn)行翻轉(zhuǎn)，下面我們就來實驗一下：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,-400,400,0); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.scale(-0.5f,-0.5f); // 畫布縮放
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
為了效果明顯，這次我不僅添加了坐標(biāo)系而且對矩形中幾個重要的點進(jìn)行了標(biāo)注，具有相同字母標(biāo)注的點是一一對應(yīng)的，本次縮放可以看做是先根據(jù)縮放中心(坐標(biāo)原點)縮放到原來的0.5倍，然后分別按照x軸和y軸進(jìn)行翻轉(zhuǎn)。
下面再看一個例子，本次對縮放中心點y軸坐標(biāo)進(jìn)行了偏移，故中心軸也向右偏移了：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,-400,400,0); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.scale(-0.5f,-0.5f,200,0); // 畫布縮放 <-- 縮放中心向右偏移了200個單位
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
PS:和位移(translate)一樣，縮放也是可以疊加的。
canvas.scale(0.5f,0.5f);
canvas.scale(0.5f,0.1f);
調(diào)用兩次縮放則 x軸實際縮放為0.5×0.5=0.25 y軸實際縮放為0.5×0.1=0.05
下面我們利用這一特性制作一個有趣的圖形。
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(-400,-400,400,400); // 矩形區(qū)域
for (int i=0; i<=20; i++) {
canvas.scale(0.9f,0.9f);
canvas.drawRect(rect,mPaint);
}
5.3 旋轉(zhuǎn)(rotate)
旋轉(zhuǎn)提供了兩種方法：
public void rotate (float degrees)
public final void rotate (float degrees, float px, float py)
和縮放一樣，第二種方法多出來的兩個參數(shù)依舊是控制旋轉(zhuǎn)中心點的。默認(rèn)的旋轉(zhuǎn)中心依舊是坐標(biāo)原點：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,-400,400,0); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.rotate(180); // 旋轉(zhuǎn)180度 <-- 默認(rèn)旋轉(zhuǎn)中心為原點
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
改變旋轉(zhuǎn)中心位置：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,-400,400,0); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.rotate(180,200,0); // 旋轉(zhuǎn)180度 <-- 旋轉(zhuǎn)中心向右偏移200個單位
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
好吧，旋轉(zhuǎn)也是可疊加的:
canvas.rotate(180);
canvas.rotate(20);
為了演示這一個效果，下面來看一個不明覺厲的東西：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
canvas.drawCircle(0,0,400,mPaint); // 繪制兩個圓形
canvas.drawCircle(0,0,380,mPaint);
for (int i=0; i<=360; i+=10){ // 繪制圓形之間的連接線
canvas.drawLine(0,380,0,400,mPaint);
canvas.rotate(10);
}
5.4 傾斜(skew)
skew這里翻譯為傾斜，有的地方也叫錯切。
/**
* float sx：將畫布在x方向上傾斜相應(yīng)的角度，sx傾斜角度的tan值，
* float sy：將畫布在y軸方向上傾斜相應(yīng)的角度，sy為傾斜角度的tan值.
*/
public void skew (float sx, float sy)
實例：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,0,200,200); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.skew(1,0); // 在x軸傾斜45度 <-- tan45 = 1
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
傾斜也是可疊加的，不過請注意，調(diào)用次序不同繪制結(jié)果也會不同：
// 將坐標(biāo)系原點移動到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);
RectF rect = new RectF(0,0,200,200); // 矩形區(qū)域
mPaint.setColor(Color.BLACK); // 繪制黑色矩形
canvas.drawRect(rect,mPaint);
canvas.skew(1,0); // 在x軸傾斜45度 <-- tan45 = 1
canvas.skew(0,1); // 在y軸傾斜45度 <-- tan45 = 1
mPaint.setColor(Color.BLUE); // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);
5.5 快照(save)和回滾(restore)
畫布的操作是不可逆的，而且很多畫布操作會影響后續(xù)的步驟，例如第一個例子，兩個圓形都是在坐標(biāo)原點繪制的，而因為坐標(biāo)系的移動繪制出來的實際位置不同。所以會對畫布的一些狀態(tài)進(jìn)行保存和回滾。
| 相關(guān)API | 簡介 |
|---|---|
| save | 把當(dāng)前的畫布的狀態(tài)進(jìn)行保存，然后放入特定的棧中 |
| saveLayerXxx | 新建一個圖層，并放入特定的棧中 |
| restore | 把棧中最頂層的畫布狀態(tài)取出來，并按照這個狀態(tài)恢復(fù)當(dāng)前的畫布 |
| restoreToCount | 彈出指定位置及其以上所有的狀態(tài)，并按照指定位置的狀態(tài)進(jìn)行恢復(fù) |
| getSaveCount | 獲取棧中內(nèi)容的數(shù)量(即保存次數(shù)) |
（1）狀態(tài)棧
這個棧可以存儲畫布狀態(tài)和圖層狀態(tài)。實際上我們看到的畫布是由多個圖層構(gòu)成的?？梢园堰@些圖層看做是一層一層的玻璃板，你在每層的玻璃板上繪制內(nèi)容，然后把這些玻璃板疊在一起看就是最終效果。
（2）常量：SaveFlags
| 數(shù)據(jù)類型 | 名稱 | 簡介 |
|---|---|---|
| int | ALL_SAVE_FLAG | 默認(rèn)，保存全部狀態(tài) |
| int | CLIP_SAVE_FLAG | 保存剪輯區(qū) |
| int | CLIP_TO_LAYER_SAVE_FLAG | 剪裁區(qū)作為圖層保存 |
| int | FULL_COLOR_LAYER_SAVE_FLAG | 保存圖層的全部色彩通道 |
| int | HAS_ALPHA_LAYER_SAVE_FLAG | 保存圖層的alpha(不透明度)通道 |
| int | MATRIX_SAVE_FLAG | 保存Matrix信息(translate, rotate, scale, skew) |
（3）save方法
save 有兩種方法：
// 保存全部狀態(tài)
public int save ()
// 根據(jù)saveFlags參數(shù)保存一部分狀態(tài)
public int save (int saveFlags)
可以看到第二種方法比第一種多了一個saveFlags參數(shù)，使用這個參數(shù)可以只保存一部分狀態(tài)，更加靈活，這個saveFlags參數(shù)具體可參考上面表格中的內(nèi)容。
每調(diào)用一次save方法，都會在棧頂添加一條狀態(tài)信息，以上面狀態(tài)棧圖片為例，再調(diào)用一次save則會在第5次上面載添加一條狀態(tài)。
（4）saveLayerXxx方法
// 無圖層alpha(不透明度)通道
public int saveLayer (RectF bounds, Paint paint)
public int saveLayer (RectF bounds, Paint paint, int saveFlags)
public int saveLayer (float left, float top, float right, float bottom, Paint paint)
public int saveLayer (float left, float top, float right, float bottom, Paint paint, int saveFlags)
// 有圖層alpha(不透明度)通道
public int saveLayerAlpha (RectF bounds, int alpha)
public int saveLayerAlpha (RectF bounds, int alpha, int saveFlags)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha, int saveFlags)
注意：saveLayerXxx方法會讓你花費(fèi)更多的時間去渲染圖像(圖層多了相互之間疊加會導(dǎo)致計算量成倍增長)，使用前請謹(jǐn)慎，如果可能，盡量避免使用。
使用saveLayerXxx方法，也會將圖層狀態(tài)也放入狀態(tài)棧中，同樣使用restore方法進(jìn)行恢復(fù)。
（5）restore方法
狀態(tài)回滾，就是從棧頂取出一個狀態(tài)然后根據(jù)內(nèi)容進(jìn)行恢復(fù)。
（6）restoreToCount方法
彈出指定位置以及以上所有狀態(tài)，并根據(jù)指定位置狀態(tài)進(jìn)行恢復(fù)。
以上面狀態(tài)棧圖片為例，如果調(diào)用restoreToCount(2) 則會彈出 2 3 4 5 的狀態(tài)，并根據(jù)第2次保存的狀態(tài)進(jìn)行恢復(fù)。
（7）getSaveCount方法
獲取保存的次數(shù)，即狀態(tài)棧中保存狀態(tài)的數(shù)量，以上面狀態(tài)棧圖片為例，使用該函數(shù)的返回值為5。
不過請注意，該函數(shù)的最小返回值為1，即使彈出了所有的狀態(tài)，返回值依舊為1，代表默認(rèn)狀態(tài)。
（8）常用姿勢
save(); //保存狀態(tài)
... //具體操作（可以更改畫布狀態(tài)）
restore(); //回滾到之前的狀態(tài)
