第六章 · 自定義控件系列

來看看這一節我們的重點，上一節因為之前從未涉及Canvas的clipXXX方法所以我們優先對其做了一定的介紹并順帶將Path類的方法做了一個小結，如我之前所說Canvas方法可以分為幾類，clipXXX算一類，各種drawXXX又是一類，還有一類則是對Canvas的各種變換操作，這一節我們將來具體看看關于Canvas變換操作的一些具體內容，在講解之前呢我們先來了解一個關于“層”的設計理念，為什么說它是一個設計理念呢？因為在很多很多的地方，當然不止是開發，還有設計等領域你都能見到它的蹤影，那么何為圖層呢？大家小時候一定都畫過畫，比如下面這種： ![](https://box.kancloud.cn/2016-05-30_574c260bdcf64.png) 一個松鼠、幾棵樹、兩個鳥、一個日，這幾個簡單的圖畫其實就包含了最簡單“層”的概念，由圖我們可以知道松鼠一定是在樹和地面的前面，而樹和地面的關系呢則比較模糊，可以是樹在前也可以是地面在前，日肯定是在最底層的，兩只鳥我們按照一般邏輯可以推測在日的上一層也就是倒數第二層，那么從底層到頂層我們就有這樣的一個層次關系：日-鳥-樹/地面-地面/樹-松鼠，這么一說大家覺得好像也是，但是目測沒毛用啊……意義何在，別急，想像一下，這時候如果你不想要松鼠而是想放一只貓在前面……或者你想把松鼠放在樹的后面“藏”起來……這時你就蛋疼了，不停地拿橡皮擦擦啊擦草啊草，一不小心還得把其他的擦掉一塊，這時候你就會想可以不可以有這么一個功能能讓不同的元素通過一定的次序單獨地畫在一張大小一致“紙”上直到畫完最后一個元素后把這些所有“紙”上的元素都整合起來構成一幅完整的圖畫呢？這樣一個功能的存在能大大提高我們繪圖的效率還能實現更多的繪圖功能，基于這樣的一個假想，“層”的概念應運而生： ![](https://box.kancloud.cn/2016-05-30_574c260c12764.png) 如上圖所示，位于最底層的是一個圓，第二層是一個藍色的橢圓，最頂層的是兩個藍色的圓，三個層中不同的元素最終構成右邊的圖像，這就是圖層最直觀也是最簡單的體現。在Android中我們可以使用Canvas的saveXXX和restoreXXX方法來模擬圖層的類似效果： ~~~ public class LayerView extends View { private Paint mPaint;// 畫筆對象 private int mViewWidth, mViewHeight;// 控件寬高 public LayerView(Context context, AttributeSet attrs) { super(context, attrs); // 實例化畫筆對象并設置其標識值 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { /* * 獲取控件寬高 */ mViewWidth = w; mViewHeight = h; } @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存畫布并繪制一個藍色的矩形 */ canvas.save(); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); } } ~~~ 如代碼所示，我們先在onDraw方法中繪制一個紅色的大矩形再保存畫布繪制了一個藍色的小矩形： ![](https://box.kancloud.cn/2016-05-30_574c260c592c8.png) 此時我們嘗試旋轉一下我們的畫布： ~~~ @Override protected void onDraw(Canvas canvas) { // 旋轉畫布 canvas.rotate(30); /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存畫布并繪制一個藍色的矩形 */ canvas.save(); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); } ~~~ 如代碼所示順時針旋轉30度，這里要注意，我們在對Canvas（實際上大多數Android中的其他與坐標有關的）進行坐標操作的時候，默認情況下是以控件的左上角為原點坐標的，效果如下： ![](https://box.kancloud.cn/2016-05-30_574c260c6f30d.png) 可以看到兩個矩形都一起飛了，可是我們只想讓藍色的飛而紅色的不動怎么辦呢？很簡單，我們只在保存的圖層里操作即可： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存畫布并繪制一個藍色的矩形 */ canvas.save(); mPaint.setColor(Color.BLUE); // 旋轉畫布 canvas.rotate(30); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); } ~~~ 可以看到，我們只針對藍色的矩形進行了旋轉： ![](https://box.kancloud.cn/2016-05-30_574c260c7f943.png) 至此結合上一節對Canvas的一些原理闡述我們該對它有個全新的認識，之前我們一直稱其為畫布，其實更準確地說Canvas是一個容器，如果把Canvas理解成畫板，那么我們的“層”就像張張夾在畫板上的透明的紙，而這些紙對應到Android則是一個個封裝在Canvas中的Bitmap。除了save()方法Canvas還給我們提供了一系列的saveLayerXXX方法給我們保存畫布，與save()方法不同的是，saveLayerXXX方法會將所有的操作存到一個新的Bitmap中而不影響當前Canvas的Bitmap，而save()方法則是在當前的Bitmap中進行操作，并且只能針對Bitmap的形變和裁剪進行操作，saveLayerXXX方法則無所不能，當然兩者還有很多的不同，我們稍作講解。雖然save和saveLayerXXX方法有著很大的區別但是在一般應用上兩者能實現的功能是差不多，上面的代碼我們也可以改成這樣： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存畫布并繪制一個藍色的矩形 */ canvas.saveLayer(0, 0, mViewWidth, mViewHeight, null, Canvas.ALL_SAVE_FLAG); mPaint.setColor(Color.BLUE); // 旋轉畫布 canvas.rotate(30); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); } ~~~ 當然實現的效果也是一樣的就不多說了。saveLayer可以讓我們自行設定需要保存的區域，比如我們可以只保存和藍色方塊一樣的區域： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存畫布并繪制一個藍色的矩形 */ canvas.saveLayer(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, null, Canvas.ALL_SAVE_FLAG); mPaint.setColor(Color.BLUE); // 旋轉畫布 canvas.rotate(30); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); } ~~~ 這時候如果你運行就會發現藍色的方塊已經不見了，因為我們圖層的大小就這么點，超出的部分就不能被顯示了，這時我們改小畫布旋轉： `canvas.rotate(5); ` 你就可以看到旋轉后的藍色方塊的一角： ![](https://box.kancloud.cn/2016-05-30_574c260c93e1d.png) 是不是有點類似于clipRect的效果呢？那么很多朋友會好奇為什么會有這樣一種保存一小塊畫布區域的功能呢？其實原因很簡單，上面我們說了saveLayerXXX方法會將操作保存到一個新的Bitmap中，而這個Bitmap的大小取決于我們傳入的參數大小，Bitmap是個相當危險的對象，很多朋友在操作Bitmap時不太理解其原理經常導致OOM，在saveLayer時我們會依據傳入的參數獲取一個相同大小的Bitmap，雖然這個Bitmap是空的但是其會占用一定的內存空間，我們希望盡可能小地保存該保存的區域，而saveLayer則提供了這樣的功能，順帶提一下，onDraw方法傳入的Canvas對象的Bitmap在Android沒引入HW之前理論上是無限大的，實際上其依然是根據你的圖像來不斷計算的，而在引入HW之后，該Bitmap受到限制，具體多大大家可以嘗試畫一個超長的path運行下你就可以在Logcat中看到warning。好了，閑話不扯，接著說，除了saveLayer，Canvas還提供了一個saveLayerAlpha方法，顧名思義，該方法可以在我們保存畫布時設置畫布的透明度： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存畫布并繪制一個藍色的矩形 */ canvas.saveLayerAlpha(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, 0x55, Canvas.ALL_SAVE_FLAG); mPaint.setColor(Color.BLUE); // 旋轉畫布 canvas.rotate(5); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); } ~~~ 我們將saveLayer替換成saveLayerAlpha并設置透明值為0x55，運行可得如下效果： ![](https://box.kancloud.cn/2016-05-30_574c260ca3cd7.png) 可見藍色的方塊被半透明了。such easy！如果大家留心，會發現save()也有個重載方法save (int saveFlags)，而saveLayer和saveLayerAlpha你也會發現又一個類似的參數，那么這個參數是干嘛用的呢？在Canvas中有六個常量值： ![](https://box.kancloud.cn/2016-05-30_574c260cb6970.png) 這六個常量值分別標識了我們在調用restore方法后還原什么，六個標識位除了CLIP_SAVE_FLAG、MATRIX_SAVE_FLAG和ALL_SAVE_FLAG是save和saveLayerXXX方法都通用外其余三個只能使saveLayerXXX方法有效，ALL_SAVE_FLAG很簡單也是我們新手級常用的標識保存所有，CLIP_SAVE_FLAG和MATRIX_SAVE_FLAG也很好理解，一個是裁剪的標識位一個是變換的標識位，CLIP_TO_LAYER_SAVE_FLAG、FULL_COLOR_LAYER_SAVE_FLAG和HAS_ALPHA_LAYER_SAVE_FLAG只對saveLayer和saveLayerAlpha有效，CLIP_TO_LAYER_SAVE_FLAG表示對當前圖層執行裁剪操作需要對齊圖層邊界，FULL_COLOR_LAYER_SAVE_FLAG表示當前圖層的色彩模式至少需要是8位色，而HAS_ALPHA_LAYER_SAVE_FLAG表示在當前圖層中將需要使用逐像素Alpha混合模式，關于色彩深度和Alpha混合大家可以參考維基百科，這里就不多說，這些標識位，特別是layer的標識位，大大超出了本系列的范疇，我就不多說了，平時使用大家可以直接ALL_SAVE_FLAG，有機會將單獨開一篇剖析Android對色彩的處理。所有的save、saveLayer和saveLayerAlpha方法都有一個int型的返回值，該返回值作為一個標識給與了一個你當前保存操作的唯一ID編號，我們可以利用restoreToCount(int saveCount)方法來指定在還原的時候還原哪一個保存操作： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存并裁剪畫布填充綠色 */ int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200); canvas.drawColor(Color.GREEN); /* * 保存畫布并旋轉后繪制一個藍色的矩形 */ int saveID2 = canvas.save(Canvas.MATRIX_SAVE_FLAG); // 旋轉畫布 canvas.rotate(5); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restoreToCount(saveID1); } ~~~ 如上代碼所示，我們第一次保存畫布并獲取其返回值： `int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); ` 然后對畫布進行裁剪并填色，第二次保存畫布并獲取其返回值： `int saveID2 = canvas.save(Canvas.MATRIX_SAVE_FLAG); ` 然后繪制一個藍色的矩形，最后我們只還原了了saveID1的畫布狀態，運行一下你會發現好像效果沒什么不同啊： ![](https://box.kancloud.cn/2016-05-30_574c260cd6400.png) 然后我們試試 `canvas.restoreToCount(saveID2); ` 發現效果還是一樣…………很多童鞋就困惑了，是哪不對么？沒有，其實都是對的，你覺得奇怪是你還不理解save和restore，這里我在restore之后再繪制一個矩形： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 繪制一個紅色矩形 */ mPaint.setColor(Color.RED); canvas.drawRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); /* * 保存并裁剪畫布填充綠色 */ int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200); canvas.drawColor(Color.GREEN); /* * 保存畫布并旋轉后繪制一個藍色的矩形 */ int saveID2 = canvas.save(Canvas.MATRIX_SAVE_FLAG); // 旋轉畫布 canvas.rotate(5); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restoreToCount(saveID2); mPaint.setColor(Color.YELLOW); canvas.drawRect(mViewWidth / 2F - 400, mViewHeight / 2F - 400, mViewWidth / 2F + 400, mViewHeight / 2F + 400, mPaint); } ~~~ 可以看到我在 `canvas.restoreToCount(saveID2); ` 之后又繪制了一個黃色的矩形： ![](https://box.kancloud.cn/2016-05-30_574c260ce5a84.png) 可是不管你如何調大這個矩形，你會發現它就那么大點……也就是說，這個黃色的矩形其實是被clip掉了，進一步說，我們繪制黃色矩形的這個操作其實說白了就是在saveID1的狀態下進行的。前面我們曾說過save和saveLayerXXX方法有著本質的區別，saveLayerXXX方法會將所有操作在一個新的Bitmap中進行，而save則是依靠stack棧來進行，假設我們有如下代碼： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 保存并裁剪畫布填充綠色 */ int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 300, mViewHeight / 2F - 300, mViewWidth / 2F + 300, mViewHeight / 2F + 300); canvas.drawColor(Color.YELLOW); /* * 保存并裁剪畫布填充綠色 */ int saveID2 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200); canvas.drawColor(Color.GREEN); /* * 保存畫布并旋轉后繪制一個藍色的矩形 */ int saveID3 = canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.rotate(5); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); } ~~~ 此時，在Canvas內部會有這樣的一個Stack棧： ![](https://box.kancloud.cn/2016-05-30_574c260d058ac.png) Canvas會默認保存一個底層的空間給我們繪制一些東西，當我們沒有調用save方法時所有的繪圖操作都在這個Default Stack ID中進行，每當我們調用一次save就會往Stack中存入一個ID，將其后所有的操作都在這個ID所指向的空間進行直到我們調用restore方法還原操作，上面代碼我們save了三次且沒有restore，stack的結構就如上圖所示，此時如果我們繼續繪制東西，比如： ~~~ @Override protected void onDraw(Canvas canvas) { /* * 保存并裁剪畫布填充綠色 */ int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 300, mViewHeight / 2F - 300, mViewWidth / 2F + 300, mViewHeight / 2F + 300); canvas.drawColor(Color.YELLOW); /* * 保存并裁剪畫布填充綠色 */ int saveID2 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200); canvas.drawColor(Color.GREEN); /* * 保存畫布并旋轉后繪制一個藍色的矩形 */ int saveID3 = canvas.save(Canvas.MATRIX_SAVE_FLAG); // 旋轉畫布 canvas.rotate(5); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); mPaint.setColor(Color.CYAN); canvas.drawRect(mViewWidth / 2F, mViewHeight / 2F, mViewWidth / 2F + 200, mViewHeight / 2F + 200, mPaint); } ~~~ 我們在saveID3之后又畫了一個青色的矩形，只要你不是傻子明眼都能看出這段代碼是在saveID3所標識的空間中繪制的，因此其必然會受到saveID3的約束旋轉： ![](https://box.kancloud.cn/2016-05-30_574c260d1bae5.png) 除此之外，大家還可以很明顯的看到，這個矩形除了被旋轉，還被clip了~也就是說saveID1、saveID2也同時對其產生了影響，此時我們再次嘗試在saveID2繪制完我們想要的東西后將其還原： ~~~ /* * 保存并裁剪畫布填充綠色 */ int saveID2 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200); canvas.drawColor(Color.GREEN); canvas.restore(); ~~~ 同時將青色的矩形變大一點： `canvas.drawRect(mViewWidth / 2F, mViewHeight / 2F, mViewWidth / 2F + 400, mViewHeight / 2F + 400, mPaint); ` 這時我們得到什么樣的效果呢： ![](https://box.kancloud.cn/2016-05-30_574c260d2cceb.png) 其實猜都猜得到，saveID2已經不再對下面的saveID3起作用了，也就是說當我們調用canvas.restore()后標志著上一個save操作的結束或者說回滾了。同理，我們再把saveID1也restore： ~~~ /* * 保存并裁剪畫布填充綠色 */ int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); canvas.clipRect(mViewWidth / 2F - 300, mViewHeight / 2F - 300, mViewWidth / 2F + 300, mViewHeight / 2F + 300); canvas.drawColor(Color.YELLOW); canvas.restore(); ~~~ 這時saveID3將徹底不再受前面操作的影響： ![](https://box.kancloud.cn/2016-05-30_574c260d3e40a.png) 如果我們在繪制青色的矩形之前將saveID3也還原： ~~~ /* * 保存畫布并旋轉后繪制一個藍色的矩形 */ int saveID3 = canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.rotate(5); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); ~~~ 那么這個青色的矩形將會被繪制在Default Stack ID上而不受其他save狀態的影響： ![](https://box.kancloud.cn/2016-05-30_574c260d4f7a0.png) 上面我們提到的restoreToCount(int saveCount)方法接受一個標識值，我們可以根據這個標識值來還原特定的棧空間，效果類似就不多說了。每當我們調用restore還原Canvas，對應的save棧空間就會從Stack中彈出去，Canvas提供了getSaveCount()方法來為我們提供查詢當前棧中有多少save的空間： ~~~ @Override protected void onDraw(Canvas canvas) { System.out.println(canvas.getSaveCount()); /* * 保存并裁剪畫布填充綠色 */ int saveID1 = canvas.save(Canvas.CLIP_SAVE_FLAG); System.out.println(canvas.getSaveCount()); canvas.clipRect(mViewWidth / 2F - 300, mViewHeight / 2F - 300, mViewWidth / 2F + 300, mViewHeight / 2F + 300); canvas.drawColor(Color.YELLOW); canvas.restore(); /* * 保存并裁剪畫布填充綠色 */ int saveID2 = canvas.save(Canvas.CLIP_SAVE_FLAG); System.out.println(canvas.getSaveCount()); canvas.clipRect(mViewWidth / 2F - 200, mViewHeight / 2F - 200, mViewWidth / 2F + 200, mViewHeight / 2F + 200); canvas.drawColor(Color.GREEN); canvas.restore(); /* * 保存畫布并旋轉后繪制一個藍色的矩形 */ int saveID3 = canvas.save(Canvas.MATRIX_SAVE_FLAG); System.out.println(canvas.getSaveCount()); // 旋轉畫布 canvas.rotate(5); mPaint.setColor(Color.BLUE); canvas.drawRect(mViewWidth / 2F - 100, mViewHeight / 2F - 100, mViewWidth / 2F + 100, mViewHeight / 2F + 100, mPaint); canvas.restore(); System.out.println(canvas.getSaveCount()); mPaint.setColor(Color.CYAN); canvas.drawRect(mViewWidth / 2F, mViewHeight / 2F, mViewWidth / 2F + 400, mViewHeight / 2F + 400, mPaint); } ~~~ 運行后你會看到Logcat的如下輸出： ![](https://box.kancloud.cn/2016-05-30_574c260d60cd1.png) OK，對層的了解到此為止，接下來我們主要來看看Canvas中的變換操作，說起變換，無非就幾種：平移、旋轉、縮放和錯切，而我們的Canvas也繼承了變換的精髓，同樣提供了這幾種相應的方法，前面的很多章節我們也都用到了，像translate(float dx, float dy)方法平移畫布用了無數次，這里再次強調，translate方法會改變畫布的原點坐標，原點坐標對變換的影響彌足輕重，前面也多次強調了！scale(float sx, float sy)縮放也很好理解，但是它有一個重載方法scale(float sx, float sy, float px, float py)，后兩個參數用于指定縮放的中心點，前兩個參數用于指定橫縱向的縮放比率值在0-1之間為縮小： ~~~ public class LayerView extends View { private Bitmap mBitmap;// 位圖對象 private int mViewWidth, mViewHeight;// 控件寬高 public LayerView(Context context, AttributeSet attrs) { super(context, attrs); // 從資源中獲取位圖對象 mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.z); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { /* * 獲取控件寬高 */ mViewWidth = w; mViewHeight = h; // 縮放位圖與控件一致 mBitmap = Bitmap.createScaledBitmap(mBitmap, mViewWidth, mViewHeight, true); } @Override protected void onDraw(Canvas canvas) { canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.scale(1.0F, 1.0F); canvas.drawBitmap(mBitmap, 0, 0, null); canvas.restore(); } } ~~~ 當縮放比率為1時表示不縮放： ![](https://box.kancloud.cn/2016-05-30_574c260d7b55d.png) 我們改變下縮放比率： `canvas.scale(0.8F, 0.35F); ` 此時畫面效果如下： ![](https://box.kancloud.cn/2016-05-30_574c260da079d.png) 可以看到縮放中心在左上角，我們可以使用scale的重載方法更改縮放中心： `canvas.scale(0.8F, 0.35F, mViewWidth, 0); ` 效果如下，很好理解： ![](https://box.kancloud.cn/2016-05-30_574c260dbe4ee.png) rotate(float degrees)和重載方法rotate(float degrees, float px, float py)類似前面也用過不少就不多說了，沒接觸過的只有skew(float sx, float sy)錯切方法，關于錯切的概念前面我們都有講過很多，其實知道原理，方法再怎么變都不難： ~~~ @Override protected void onDraw(Canvas canvas) { canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.skew(0.5F, 0F); canvas.drawBitmap(mBitmap, 0, 0, null); canvas.restore(); } ~~~ 兩個參數與scale類似表示橫縱向的錯切比率，上面代碼的效果如下： ![](https://box.kancloud.cn/2016-05-30_574c260dd8490.png) 在之前的章節中我們曾講過一個類似的用來專門操作變換的玩意Matrix，之前我也說過我們會在很多地方用到這畜生，Canvas也提供了對應的方法來便于我們設置Matrix直接變換Canvas： ~~~ @Override protected void onDraw(Canvas canvas) { canvas.save(Canvas.MATRIX_SAVE_FLAG); Matrix matrix = new Matrix(); matrix.setScale(0.8F, 0.35F); matrix.postTranslate(100, 100); canvas.setMatrix(matrix); canvas.drawBitmap(mBitmap, 0, 0, null); canvas.restore(); } ~~~ 運行效果如下： ![](https://box.kancloud.cn/2016-05-30_574c260e0f495.png) 好了，關于Canvas的保存還原和變換的簡單操作就介紹到這吧，剩些的一些draw方法都很好理解簡單，難的我前面已經陸續穿插講了，作為自定義控件的一部分，繪制我們用了六節的篇幅去介紹，內容多主要是Android給我們提供了很完善的接口方法以至于你在上層開發的時候壓根不用去管什么源碼實現，接下來的章節我們會開始進入另一個重點：控件的測量，不過在此之前我想給大家結合前面學到的一些知識來做一個關于翻頁效果的小例子。該部分源碼下載：[傳送門](http://download.csdn.net/detail/aigestudio/8357593)