安卓自定義View進階-Canvas之畫布操做 轉載

安卓自定義View進階-Canvas之畫布操做

轉載 https://www.gcssloop.com/customview/Canvas_Convert

原本想把畫布操做放到後面部分的，可是發現不少圖形繪製都離不開畫布操做，因而先講解一下畫布的基本操做方法。

一.Canvas的經常使用操做速查表

操做類型	相關API	備註
繪製顏色	drawColor, drawRGB, drawARGB	使用單一顏色填充整個畫布
繪製基本形狀	drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc	依次爲 點、線、矩形、圓角矩形、橢圓、圓、圓弧
繪製圖片	drawBitmap, drawPicture	繪製位圖和圖片
繪製文本	drawText, drawPosText, drawTextOnPath	依次爲 繪製文字、繪製文字時指定每一個文字位置、根據路徑繪製文字
繪製路徑	drawPath	繪製路徑，繪製貝塞爾曲線時也須要用到該函數
頂點操做	drawVertices, drawBitmapMesh	經過對頂點操做可使圖像形變，drawVertices直接對畫布做用、 drawBitmapMesh只對繪製的Bitmap做用
畫布剪裁	clipPath, clipRect	設置畫布的顯示區域
畫布快照	save, restore, saveLayerXxx, restoreToCount, getSaveCount	依次爲 保存當前狀態、 回滾到上一次保存的狀態、 保存圖層狀態、 回滾到指定狀態、 獲取保存次數
畫布變換	translate, scale, rotate, skew	依次爲 位移、縮放、 旋轉、錯切
Matrix(矩陣)	getMatrix, setMatrix, concat	實際上畫布的位移，縮放等操做的都是圖像矩陣Matrix， 只不過Matrix比較難以理解和使用，故封裝了一些經常使用的方法。

---

二.Canvas基本操做

1.畫布操做

爲何要有畫布操做？

畫布操做能夠幫助咱們用更加容易理解的方式製做圖形。

例如： 從座標原點爲起點，繪製一個長度爲20dp，與水平線夾角爲30度的線段怎麼作？

按照咱們一般的想法(被常年訓練出來的數學思惟)，就是先使用三角函數計算出線段結束點的座標，而後調用drawLine便可。

然而這是不是被固有思惟禁錮了？

假設咱們先繪製一個長度爲20dp的水平線，而後將這條水平線旋轉30度，則最終看起來效果是相同的，並且不用進行三角函數計算，這樣是否更加簡單了一點呢？

合理的使用畫布操做能夠幫助你用更容易理解的方式創做你想要的效果，這也是畫布操做存在的緣由。

PS: 全部的畫布操做都隻影響後續的繪製，對以前已經繪製過的內容沒有影響。

---

⑴位移(translate)

translate是座標系的移動，能夠爲圖形繪製選擇一個合適的座標系。 請注意，位移是基於當前位置移動，而不是每次基於屏幕左上角的(0,0)點移動，以下：

// 省略了建立畫筆的代碼 // 在座標原點繪製一個黑色圓形 mPaint.setColor(Color.BLACK); canvas.translate(200,200); canvas.drawCircle(0,0,100,mPaint); // 在座標原點繪製一個藍色圓形 mPaint.setColor(Color.BLUE); canvas.translate(200,200); canvas.drawCircle(0,0,100,mPaint); 

咱們首先將座標系移動一段距離繪製一個圓形，以後再移動一段距離繪製一個圓形，兩次移動是可疊加的。

---

⑵縮放(scale)

縮放提供了兩個方法，以下：

public void scale (float sx, float sy) public final void scale (float sx, float sy, float px, float py) 

這兩個方法中前兩個參數是相同的分別爲x軸和y軸的縮放比例。而第二種方法比前一種多了兩個參數，用來控制縮放中心位置的。

縮放比例(sx,sy)取值範圍詳解：

取值範圍(n)	說明
(-∞, -1)	先根據縮放中心放大n倍，再根據中心軸進行翻轉
-1	根據縮放中心軸進行翻轉
(-1, 0)	先根據縮放中心縮小到n，再根據中心軸進行翻轉
0	不會顯示，若sx爲0，則寬度爲0，不會顯示，sy同理
(0, 1)	根據縮放中心縮小到n
1	沒有變化
(1, +∞)	根據縮放中心放大n倍

若是在縮放時稍微注意一下就會發現縮放的中心默認爲座標原點,而縮放中心軸就是座標軸，以下：

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,-400,400,0); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.scale(0.5f,0.5f); // 畫布縮放 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

(爲了更加直觀，我添加了一個座標系，能夠比較明顯的看出，縮放中心就是座標原點)

接下來咱們使用第二種方法讓縮放中心位置稍微改變一下，以下：

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,-400,400,0); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.scale(0.5f,0.5f,200,0); // 畫布縮放 <-- 縮放中心向右偏移了200個單位 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

(圖中用箭頭指示的就是縮放中心。)

前面兩個示例縮放的數值都是正數，按照表格中的說明，當縮放比例爲負數的時候會根據縮放中心軸進行翻轉，下面咱們就來實驗一下：

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,-400,400,0); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.scale(-0.5f,-0.5f); // 畫布縮放 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

爲了效果明顯，此次我不只添加了座標系並且對矩形中幾個重要的點進行了標註，具備相同字母標註的點是一一對應的。

因爲本次未對縮放中心進行偏移，全部默認的縮放中心就是座標原點，中心軸就是x軸和y軸。

本次縮放能夠看作是先根據縮放中心(座標原點)縮放到原來的0.5倍，而後分別按照x軸和y軸進行翻轉。

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,-400,400,0); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.scale(-0.5f,-0.5f,200,0); // 畫布縮放 <-- 縮放中心向右偏移了200個單位 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

添加了這麼多的輔助內容，但願你們可以看懂。

本次對縮放中心點y軸座標進行了偏移，故中心軸也向右偏移了。

PS:和位移(translate)同樣，縮放也是能夠疊加的。

canvas.scale(0.5f,0.5f); canvas.scale(0.5f,0.1f); 

調用兩次縮放則 x軸實際縮放爲0.5x0.5=0.25 y軸實際縮放爲0.5x0.1=0.05

下面咱們利用這一特性製做一個有趣的圖形。

注意設置畫筆模式爲描邊(STROKE)

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(-400,-400,400,400); // 矩形區域 for (int i=0; i<=20; i++) { canvas.scale(0.9f,0.9f); canvas.drawRect(rect,mPaint); } 

---

⑶旋轉(rotate)

旋轉提供了兩種方法：

public void rotate (float degrees) public final void rotate (float degrees, float px, float py) 

和縮放同樣，第二種方法多出來的兩個參數依舊是控制旋轉中心點的。

默認的旋轉中心依舊是座標原點：

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,-400,400,0); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.rotate(180); // 旋轉180度 <-- 默認旋轉中心爲原點 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

改變旋轉中心位置：

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,-400,400,0); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.rotate(180,200,0); // 旋轉180度 <-- 旋轉中心向右偏移200個單位 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

好吧，旋轉也是可疊加的

canvas.rotate(180); canvas.rotate(20); 

調用兩次旋轉，則實際的旋轉角度爲180+20=200度。

爲了演示這一個效果，我作了一個不明覺厲的東西：

// 將座標系原點移動到畫布正中心 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); } 

---

⑷錯切(skew)

skew這裏翻譯爲錯切，錯切是特殊類型的線性變換。

錯切只提供了一種方法：

public void skew (float sx, float sy) 

參數含義：
float sx:將畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，
float sy:將畫布在y軸方向上傾斜相應的角度，sy爲傾斜角度的tan值.

變換後:

X = x + sx * y
Y = sy * x + y

示例：

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,0,200,200); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.skew(1,0); // 水平錯切 <- 45度 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

如你所想，錯切也是可疊加的，不過請注意，調用次序不一樣繪製結果也會不一樣

// 將座標系原點移動到畫布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(0,0,200,200); // 矩形區域 mPaint.setColor(Color.BLACK); // 繪製黑色矩形 canvas.drawRect(rect,mPaint); canvas.skew(1,0); // 水平錯切 canvas.skew(0,1); // 垂直錯切 mPaint.setColor(Color.BLUE); // 繪製藍色矩形 canvas.drawRect(rect,mPaint); 

---

⑸快照(save)和回滾(restore)

Q: 爲何存在快照與回滾
A：畫布的操做是不可逆的，並且不少畫布操做會影響後續的步驟，例如第一個例子，兩個圓形都是在座標原點繪製的，而由於座標系的移動繪製出來的實際位置不一樣。因此會對畫布的一些狀態進行保存和回滾。

與之相關的API:

相關API	簡介
save	把當前的畫布的狀態進行保存，而後放入特定的棧中
saveLayerXxx	新建一個圖層，並放入特定的棧中
restore	把棧中最頂層的畫布狀態取出來，並按照這個狀態恢復當前的畫布
restoreToCount	彈出指定位置及其以上全部的狀態，並按照指定位置的狀態進行恢復
getSaveCount	獲取棧中內容的數量(即保存次數)

下面對其中的一些概念和方法進行分析：

狀態棧：

其實這個棧我也不知道叫什麼名字，暫時叫作狀態棧吧，它看起來像下面這樣：

這個棧能夠存儲畫布狀態和圖層狀態。

Q：什麼是畫布和圖層？
A：實際上咱們看到的畫布是由多個圖層構成的，以下圖(圖片來自網絡)：

實際上咱們以前講解的繪製操做和畫布操做都是在默認圖層上進行的。
在一般狀況下，使用默認圖層就可知足需求，可是若是須要繪製比較複雜的內容，如地圖(地圖能夠有多個地圖層疊加而成，好比：政區層，道路層，興趣點層)等，則分圖層繪製比較好一些。
你能夠把這些圖層看作是一層一層的玻璃板，你在每層的玻璃板上繪製內容，而後把這些玻璃板疊在一塊兒看就是最終效果。

SaveFlags

名稱	簡介
ALL_SAVE_FLAG	默認，保存所有狀態
CLIP_SAVE_FLAG	保存剪輯區
CLIP_TO_LAYER_SAVE_FLAG	剪裁區做爲圖層保存
FULL_COLOR_LAYER_SAVE_FLAG	保存圖層的所有色彩通道
HAS_ALPHA_LAYER_SAVE_FLAG	保存圖層的alpha(不透明度)通道
MATRIX_SAVE_FLAG	保存Matrix信息( translate, rotate, scale, skew)

save

save 有兩種方法：

// 保存所有狀態 public int save () // 根據saveFlags參數保存一部分狀態 public int save (int saveFlags) 

能夠看到第二種方法比第一種多了一個saveFlags參數，使用這個參數能夠只保存一部分狀態，更加靈活，這個saveFlags參數具體可參考上面表格中的內容。

每調用一次save方法，都會在棧頂添加一條狀態信息，以上面狀態棧圖片爲例，再調用一次save則會在第5次上面載添加一條狀態。

saveLayerXxx

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方法會讓你花費更多的時間去渲染圖像(圖層多了相互之間疊加會致使計算量成倍增加)，使用前請謹慎，若是可能，儘可能避免使用。

使用saveLayerXxx方法，也會將圖層狀態也放入狀態棧中，一樣使用restore方法進行恢復。

這個暫時不過多講述，若是之後用到詳細講解。(由於這裏面東西也有很多啊QAQ)

restore

狀態回滾，就是從棧頂取出一個狀態而後根據內容進行恢復。

一樣以上面狀態棧圖片爲例，調用一次restore方法則將狀態棧中第5次取出，根據裏面保存的狀態進行狀態恢復。

restoreToCount

彈出指定位置以及以上全部狀態，並根據指定位置狀態進行恢復。

以上面狀態棧圖片爲例，若是調用restoreToCount(2) 則會彈出 2 3 4 5 的狀態，並根據第2次保存的狀態進行恢復。

getSaveCount

獲取保存的次數，即狀態棧中保存狀態的數量，以上面狀態棧圖片爲例，使用該函數的返回值爲5。

不過請注意，該函數的最小返回值爲1，即便彈出了全部的狀態，返回值依舊爲1，表明默認狀態。

經常使用格式

雖然關於狀態的保存和回滾囉嗦了很多，不過大多數狀況下只須要記住下面的步驟就能夠了：

save(); //保存狀態 ... //具體操做 restore(); //回滾到以前的狀態 

這種方式也是最簡單和最容易理解的使用方法。

---

三.總結

如本文一開始所說，合理的使用畫布操做能夠幫助你用更容易理解的方式創做你想要的效果。