3-安卓自定義View進階-畫布操作 · 我的Android Wiki

# Canvas之畫布操作 ### 作者微博: [@GcsSloop](http://weibo.com/GcsSloop) ### [【本系列相關文章】](https://github.com/GcsSloop/AndroidNote/tree/master/CustomView/README.md) 上一篇[Canvas之繪制基本形狀](https://github.com/GcsSloop/AndroidNote/blob/master/CustomView/Advance/%5B02%5DCanvas_BasicGraphics.md)中我們了解了如何使用Canvas繪制基本圖形，本次了解一些基本的畫布操作。本來想把畫布操作放到后面部分的，但是發現很多圖形繪制都離不開畫布操作，于是先講解一下畫布的基本操作方法。 ## 一.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)點移動**，如下： ``` java // 省略了創建畫筆的代碼 // 在坐標原點繪制一個黑色圓形 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); ``` <img src="http://ww3.sinaimg.cn/large/005Xtdi2jw1f2f1ph46qaj30u01hcgm3.jpg" width="300"/> 我們首先將坐標系移動一段距離繪制一個圓形，之后再移動一段距離繪制一個圓形，兩次移動是可疊加的。 ***** #### ⑵縮放(scale) 縮放提供了兩個方法，如下： ``` java 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倍 | 如果在縮放時稍微注意一下就會發現縮放的中心默認為坐標原點,而縮放中心軸就是坐標軸，如下： ``` java // 將坐標系原點移動到畫布正中心 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); ``` (為了更加直觀，我添加了一個坐標系，可以比較明顯的看出，縮放中心就是坐標原點) <img src="http://ww3.sinaimg.cn/large/005Xtdi2jw1f2f1vphdjjj30u01hct9r.jpg" width="300" /> 接下來我們使用第二種方法讓縮放中心位置稍微改變一下，如下： ``` java // 將坐標系原點移動到畫布正中心 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); ``` (圖中用箭頭指示的就是縮放中心。) <img src="http://ww4.sinaimg.cn/large/005Xtdi2jw1f2f1w7kv8dj30u01hct9s.jpg" width="300" /> 前面兩個示例縮放的數值都是正數，按照表格中的說明，**當縮放比例為負數的時候會根據縮放中心軸進行翻轉**，下面我們就來實驗一下： ``` java // 將坐標系原點移動到畫布正中心 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); ``` <img src="http://ww1.sinaimg.cn/large/005Xtdi2jw1f2f1x76o6qj30u01hc0tu.jpg" width="300" /> > 為了效果明顯，這次我不僅添加了坐標系而且對矩形中幾個重要的點進行了標注，具有相同字母標注的點是一一對應的。由于本次未對縮放中心進行偏移，所有默認的縮放中心就是坐標原點，中心軸就是x軸和y軸。本次縮放可以看做是先根據縮放中心(坐標原點)縮放到原來的0.5倍，然后分別按照x軸和y軸進行翻轉。 ``` java // 將坐標系原點移動到畫布正中心 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); ``` <img src="http://ww3.sinaimg.cn/large/005Xtdi2jw1f2f1xth4p6j30u01hc0u4.jpg" width="300" /> > 添加了這么多的輔助內容，希望大家能夠看懂。本次對縮放中心點y軸坐標進行了偏移，故中心軸也向右偏移了。 PS:和位移(translate)一樣，縮放也是可以疊加的。 ``` java canvas.scale(0.5f,0.5f); canvas.scale(0.5f,0.1f); ``` 調用兩次縮放則 x軸實際縮放為0.5x0.5=0.25 y軸實際縮放為0.5x0.1=0.05 下面我們利用這一特性制作一個有趣的圖形。 ``` java // 將坐標系原點移動到畫布正中心 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); } ``` <img src="http://ww4.sinaimg.cn/large/005Xtdi2jw1f2f1yfn22xj30u01hcta9.jpg" width="300" /> ***** #### ⑶旋轉(rotate) 旋轉提供了兩種方法： ``` java public void rotate (float degrees) public final void rotate (float degrees, float px, float py) ``` 和縮放一樣，第二種方法多出來的兩個參數依舊是控制旋轉中心點的。默認的旋轉中心依舊是坐標原點： ``` java // 將坐標系原點移動到畫布正中心 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); ``` <img src="http://ww2.sinaimg.cn/large/005Xtdi2jw1f2f1yws38nj30u01hcmy8.jpg" width="300" /> 改變旋轉中心位置： ``` java // 將坐標系原點移動到畫布正中心 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); ``` <img src="http://ww2.sinaimg.cn/large/005Xtdi2jw1f2f1zcmwb2j30u01hcmy9.jpg" width="300" /> 好吧，旋轉也是可疊加的 ``` java canvas.rotate(180); canvas.rotate(20); ``` 調用兩次旋轉，則實際的旋轉角度為180+20=200度。為了演示這一個效果，我做了一個不明覺厲的東西： ``` java // 將坐標系原點移動到畫布正中心 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); } ``` <img src="http://ww3.sinaimg.cn/large/005Xtdi2jw1f2f1zsnj00j30u01hc75a.jpg" width="300" /> ***** #### ⑷錯切(skew) skew這里翻譯為錯切，錯切是特殊類型的線性變換。錯切只提供了一種方法： ``` java 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 ``` 示例： ``` java // 將坐標系原點移動到畫布正中心 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); ``` <img src="http://ww4.sinaimg.cn/large/005Xtdi2jw1f2f20h7i23j30u01hcdgq.jpg" width="300" /> 如你所想，錯切也是可疊加的，不過請注意，調用次序不同繪制結果也會不同 ``` java // 將坐標系原點移動到畫布正中心 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); ``` <img src="http://ww3.sinaimg.cn/large/005Xtdi2jw1f2f20w0rffj30u01hcgm8.jpg" width="300" /> ***** #### ⑸快照(save)和回滾(restore) Q: 為什存在快照與回滾 A：畫布的操作是不可逆的，而且很多畫布操作會影響后續的步驟，例如第一個例子，兩個圓形都是在坐標原點繪制的，而因為坐標系的移動繪制出來的實際位置不同。所以會對畫布的一些狀態進行保存和回滾。 與之相關的API: | 相關API | 簡介 | | -------------- | ------------------------------ | | save | 把當前的畫布的狀態進行保存，然后放入特定的棧中 | | saveLayerXxx | 新建一個圖層，并放入特定的棧中 | | restore | 把棧中最頂層的畫布狀態取出來，并按照這個狀態恢復當前的畫布 | | restoreToCount | 彈出指定位置及其以上所有的狀態，并按照指定位置的狀態進行恢復 | | getSaveCount | 獲取棧中內容的數量(即保存次數) | 下面對其中的一些概念和方法進行分析： ##### 狀態棧：其實這個棧我也不知道叫什么名字，暫時叫做狀態棧吧，它看起來像下面這樣： ![](http://ww4.sinaimg.cn/large/005Xtdi2jw1f2gfqmu2sgj308c0dwmxw.jpg) 這個棧可以存儲畫布狀態和圖層狀態。 Q：什么是畫布和圖層？ A：實際上我們看到的畫布是由多個圖層構成的，如下圖(圖片來自網絡)： ![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f2gfrc6fdkj308c0dwglr.jpg) 實際上我們之前講解的繪制操作和畫布操作都是在默認圖層上進行的。 在通常情況下，使用默認圖層就可滿足需求，但是如果需要繪制比較復雜的內容，如地圖(地圖可以有多個地圖層疊加而成，比如：政區層，道路層，興趣點層)等，則分圖層繪制比較好一些。 你可以把這些圖層看做是一層一層的玻璃板，你在每層的玻璃板上繪制內容，然后把這些玻璃板疊在一起看就是最終效果。 ##### SaveFlags | 數據類型 | 名稱 | 簡介 | | ---- | -------------------------- | ---------------------------------------- | | int | ALL_SAVE_FLAG | 默認，保存全部狀態 | | int | CLIP_SAVE_FLAG | 保存剪輯區 | | int | CLIP_TO_LAYER_SAVE_FLAG | 剪裁區作為圖層保存 | | int | FULL_COLOR_LAYER_SAVE_FLAG | 保存圖層的全部色彩通道 | | int | HAS_ALPHA_LAYER_SAVE_FLAG | 保存圖層的alpha(不透明度)通道 | | int | MATRIX_SAVE_FLAG | 保存Matrix信息(translate, rotate, scale, skew) | ##### save save 有兩種方法： ``` java // 保存全部狀態 public int save () // 根據saveFlags參數保存一部分狀態 public int save (int saveFlags) ``` 可以看到第二種方法比第一種多了一個saveFlags參數，使用這個參數可以只保存一部分狀態，更加靈活，這個saveFlags參數具體可參考上面表格中的內容。每調用一次save方法，都會在棧頂添加一條狀態信息，以上面狀態棧圖片為例，再調用一次save則會在第5次上面載添加一條狀態。 #### saveLayerXxx saveLayerXxx有比較多的方法： ``` java // 無圖層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，代表默認狀態。 ##### 常用格式雖然關于狀態的保存和回滾啰嗦了不少，不過大多數情況下只需要記住下面的步驟就可以了： ``` java save(); //保存狀態 ... //具體操作 restore(); //回滾到之前的狀態 ``` 這種方式也是最簡單和最容易理解的使用方法。 ****** ## 三.總結如本文一開始所說，合理的使用畫布操作可以幫助你用更容易理解的方式創作你想要的效果。 (,,? ? ?,,) PS: 由于本人英文水平有限，某些地方可能存在誤解或詞語翻譯不準確，如果你對此有疑問可以提交Issues進行反饋。 ## About Me ### 作者微博: <a href="http://weibo.com/GcsSloop" target="_blank">@GcsSloop</a> <a href="https://github.com/GcsSloop/AndroidNote/blob/magic-world/FINDME.md" target="_blank"> <img src="http://ww4.sinaimg.cn/large/005Xtdi2gw1f1qn89ihu3j315o0dwwjc.jpg" width="300"/> </a> ****** ## 四.參考資料 [Canvas](http://developer.android.com/reference/android/graphics/Canvas.html) [canvas變換與操作](http://blog.csdn.net/harvic880925/article/details/39080931) [Canvas之translate、scale、rotate、skew方法講解](http://blog.csdn.net/tianjian4592/article/details/45234419) [Canvas的save(),saveLayer()和restore()淺談](http://www.cnblogs.com/liangstudyhome/p/4143498.html) [Graphics->Layers](http://www.programgo.com/article/72302404062/;jsessionid=8E62016408BFFB21D46F9C878A49D8EE) []() []()