上一篇Canvas之繪制基本圖形中我們了解了如何使用Canvas繪制基本圖形，本次了解一些基本的畫布操作窒悔。

本來想把畫布操作放到后面部分的呜袁，但是發(fā)現(xiàn)很多圖形繪制都離不開畫布操作，于是先講解一下畫布的基本操作方法蛉迹。

一.Canvas的常用操作速查表

二.Canvas基本操作

1.畫布操作

為什么要有畫布操作伏蚊？

畫布操作可以幫助我們用更加容易理解的方式制作圖形立轧。

例如： 從坐標(biāo)原點(diǎn)為起點(diǎn)，繪制一個(gè)長度為20dp躏吊，與水平線夾角為30度的線段怎么做氛改？

按照我們通常的想法(被常年訓(xùn)練出來的數(shù)學(xué)思維)，就是先使用三角函數(shù)計(jì)算出線段結(jié)束點(diǎn)的坐標(biāo)颜阐，然后調(diào)用drawLine即可平窘。

然而這是否是被固有思維禁錮了？

假設(shè)我們先繪制一個(gè)長度為20dp的水平線凳怨，然后將這條水平線旋轉(zhuǎn)30度瑰艘，則最終看起來效果是相同的是鬼，而且不用進(jìn)行三角函數(shù)計(jì)算，這樣是否更加簡單了一點(diǎn)呢紫新？

合理的使用畫布操作可以幫助你用更容易理解的方式創(chuàng)作你想要的效果均蜜，這也是畫布操作存在的原因。

PS: 所有的畫布操作都只影響后續(xù)的繪制芒率，對(duì)之前已經(jīng)繪制過的內(nèi)容沒有影響囤耳。

⑴位移(translate)

translate是坐標(biāo)系的移動(dòng)，可以為圖形繪制選擇一個(gè)合適的坐標(biāo)系偶芍。
請(qǐng)注意充择，位移是基于當(dāng)前位置移動(dòng)，而不是每次基于屏幕左上角的(0,0)點(diǎn)移動(dòng)匪蟀，如下：

// 省略了創(chuàng)建畫筆的代碼

// 在坐標(biāo)原點(diǎn)繪制一個(gè)黑色圓形
mPaint.setColor(Color.BLACK);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);

// 在坐標(biāo)原點(diǎn)繪制一個(gè)藍(lán)色圓形
mPaint.setColor(Color.BLUE);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);

我們首先將坐標(biāo)系移動(dòng)一段距離繪制一個(gè)圓形椎麦，之后再移動(dòng)一段距離繪制一個(gè)圓形，兩次移動(dòng)是可疊加的材彪。

⑵縮放(scale)

縮放提供了兩個(gè)方法观挎，如下：

public void scale (float sx, float sy)

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

這兩個(gè)方法中前兩個(gè)參數(shù)是相同的分別為x軸和y軸的縮放比例。而第二種方法比前一種多了兩個(gè)參數(shù)段化，用來控制縮放中心位置的嘁捷。

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

如果在縮放時(shí)稍微注意一下就會(huì)發(fā)現(xiàn)縮放的中心默認(rèn)為坐標(biāo)原點(diǎn),而縮放中心軸就是坐標(biāo)軸，如下：

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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);

(為了更加直觀履肃，我添加了一個(gè)坐標(biāo)系仔沿，可以比較明顯的看出，縮放中心就是坐標(biāo)原點(diǎn))

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

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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個(gè)單位

mPaint.setColor(Color.BLUE);            // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);

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

前面兩個(gè)示例縮放的數(shù)值都是正數(shù)，按照表格中的說明膘螟，當(dāng)縮放比例為負(fù)數(shù)的時(shí)候會(huì)根據(jù)縮放中心軸進(jìn)行翻轉(zhuǎn)成福，下面我們就來實(shí)驗(yàn)一下：

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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)系而且對(duì)矩形中幾個(gè)重要的點(diǎn)進(jìn)行了標(biāo)注荆残，具有相同字母標(biāo)注的點(diǎn)是一一對(duì)應(yīng)的奴艾。

由于本次未對(duì)縮放中心進(jìn)行偏移，所有默認(rèn)的縮放中心就是坐標(biāo)原點(diǎn)内斯，中心軸就是x軸和y軸蕴潦。

本次縮放可以看做是先根據(jù)縮放中心(坐標(biāo)原點(diǎn))縮放到原來的0.5倍像啼，然后分別按照x軸和y軸進(jìn)行翻轉(zhuǎn)。

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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個(gè)單位

mPaint.setColor(Color.BLUE);            // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);

添加了這么多的輔助內(nèi)容潭苞，希望大家能夠看懂忽冻。

本次對(duì)縮放中心點(diǎn)y軸坐標(biāo)進(jìn)行了偏移，故中心軸也向右偏移了此疹。

<b>PS:和位移(translate)一樣僧诚，縮放也是可以疊加的。</b>

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

調(diào)用兩次縮放則 x軸實(shí)際縮放為0.5x0.5=0.25 y軸實(shí)際縮放為0.5x0.1=0.05

下面我們利用這一特性制作一個(gè)有趣的圖形。

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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);
}

⑶旋轉(zhuǎn)(rotate)

旋轉(zhuǎn)提供了兩種方法：

public void rotate (float degrees)

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

和縮放一樣，第二種方法多出來的兩個(gè)參數(shù)依舊是控制旋轉(zhuǎn)中心點(diǎn)的。

默認(rèn)的旋轉(zhuǎn)中心依舊是坐標(biāo)原點(diǎn)：

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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)中心為原點(diǎn)

mPaint.setColor(Color.BLUE);            // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);

改變旋轉(zhuǎn)中心位置：

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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個(gè)單位

mPaint.setColor(Color.BLUE);            // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);

<b>好吧，旋轉(zhuǎn)也是可疊加的</b>

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

調(diào)用兩次旋轉(zhuǎn)绳姨，則實(shí)際的旋轉(zhuǎn)角度為180+20=200度。

為了演示這一個(gè)效果侍芝，我做了一個(gè)不明覺厲的東西：

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
canvas.translate(mWidth / 2, mHeight / 2);

canvas.drawCircle(0,0,400,mPaint);          // 繪制兩個(gè)圓形
canvas.drawCircle(0,0,380,mPaint);

for (int i=0; i<=360; i+=10){               // 繪制圓形之間的連接線
   canvas.drawLine(0,380,0,400,mPaint);
   canvas.rotate(10);
}

⑷錯(cuò)切(skew)

skew這里翻譯為錯(cuò)切凉泄，錯(cuò)切是特殊類型的線性變換。

錯(cuò)切只提供了一種方法：

public void skew (float sx, float sy)

<b>參數(shù)含義：

float sx:將畫布在x方向上傾斜相應(yīng)的角度清钥，sx傾斜角度的tan值琼锋，

float sy:將畫布在y軸方向上傾斜相應(yīng)的角度，sy為傾斜角度的tan值.</b>

變換后:

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

示例：

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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);                       // 水平錯(cuò)切 <- 45度

mPaint.setColor(Color.BLUE);            // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);

<b>如你所想祟昭，錯(cuò)切也是可疊加的缕坎，不過請(qǐng)注意，調(diào)用次序不同繪制結(jié)果也會(huì)不同</b>

// 將坐標(biāo)系原點(diǎn)移動(dòng)到畫布正中心
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);                       // 水平錯(cuò)切
canvas.skew(0,1);                       // 垂直錯(cuò)切

mPaint.setColor(Color.BLUE);            // 繪制藍(lán)色矩形
canvas.drawRect(rect,mPaint);

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

Q: 為什存在快照與回滾
A：畫布的操作是不可逆的篡悟，而且很多畫布操作會(huì)影響后續(xù)的步驟谜叹，例如第一個(gè)例子，兩個(gè)圓形都是在坐標(biāo)原點(diǎn)繪制的搬葬，而因?yàn)樽鴺?biāo)系的移動(dòng)繪制出來的實(shí)際位置不同荷腊。所以會(huì)對(duì)畫布的一些狀態(tài)進(jìn)行保存和回滾。

與之相關(guān)的API:

下面對(duì)其中的一些概念和方法進(jìn)行分析：

狀態(tài)棧：

其實(shí)這個(gè)棧我也不知道叫什么名字疾忍，暫時(shí)叫做狀態(tài)棧吧，它看起來像下面這樣：

這個(gè)棿踩可以存儲(chǔ)畫布狀態(tài)和圖層狀態(tài)一罩。

Q：什么是畫布和圖層？
A：實(shí)際上我們看到的畫布是由多個(gè)圖層構(gòu)成的撇簿，如下圖(圖片來自網(wǎng)絡(luò))：

實(shí)際上我們之前講解的繪制操作和畫布操作都是在默認(rèn)圖層上進(jìn)行的聂渊。

在通常情況下推汽，使用默認(rèn)圖層就可滿足需求，但是如果需要繪制比較復(fù)雜的內(nèi)容歧沪，如地圖(地圖可以有多個(gè)地圖層疊加而成歹撒，比如：政區(qū)層，道路層诊胞，興趣點(diǎn)層)等暖夭，則分圖層繪制比較好一些。

你可以把這些圖層看做是一層一層的玻璃板撵孤，你在每層的玻璃板上繪制內(nèi)容迈着，然后把這些玻璃板疊在一起看就是最終效果。

SaveFlags

save

save 有兩種方法：

// 保存全部狀態(tài)
public int save ()

// 根據(jù)saveFlags參數(shù)保存一部分狀態(tài)
public int save (int saveFlags)

可以看到第二種方法比第一種多了一個(gè)saveFlags參數(shù)裕菠，使用這個(gè)參數(shù)可以只保存一部分狀態(tài)，更加靈活闭专，這個(gè)saveFlags參數(shù)具體可參考上面表格中的內(nèi)容奴潘。

每調(diào)用一次save方法，都會(huì)在棧頂添加一條狀態(tài)信息影钉，以上面狀態(tài)棧圖片為例画髓，再調(diào)用一次save則會(huì)在第5次上面載添加一條狀態(tài)。

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)

<b>注意：saveLayerXxx方法會(huì)讓你花費(fèi)更多的時(shí)間去渲染圖像(圖層多了相互之間疊加會(huì)導(dǎo)致計(jì)算量成倍增長)平委，使用前請(qǐng)謹(jǐn)慎奈虾，如果可能，盡量避免使用廉赔。</b>

使用saveLayerXxx方法肉微，也會(huì)將圖層狀態(tài)也放入狀態(tài)棧中，同樣使用restore方法進(jìn)行恢復(fù)蜡塌。

這個(gè)暫時(shí)不過多講述碉纳，如果以后用到詳細(xì)講解。(因?yàn)檫@里面東西也有不少啊QAQ)

restore

狀態(tài)回滾岗照，就是從棧頂取出一個(gè)狀態(tài)然后根據(jù)內(nèi)容進(jìn)行恢復(fù)村象。

同樣以上面狀態(tài)棧圖片為例，調(diào)用一次restore方法則將狀態(tài)棧中第5次取出攒至，根據(jù)里面保存的狀態(tài)進(jìn)行狀態(tài)恢復(fù)厚者。

restoreToCount

彈出指定位置以及以上所有狀態(tài)，并根據(jù)指定位置狀態(tài)進(jìn)行恢復(fù)迫吐。

以上面狀態(tài)棧圖片為例库菲，如果調(diào)用restoreToCount(2) 則會(huì)彈出 2 3 4 5 的狀態(tài)，并根據(jù)第2次保存的狀態(tài)進(jìn)行恢復(fù)志膀。

getSaveCount

獲取保存的次數(shù)熙宇，即狀態(tài)棧中保存狀態(tài)的數(shù)量鳖擒，以上面狀態(tài)棧圖片為例，使用該函數(shù)的返回值為5烫止。

不過請(qǐng)注意蒋荚，該函數(shù)的最小返回值為1，即使彈出了所有的狀態(tài)馆蠕，返回值依舊為1期升，代表默認(rèn)狀態(tài)。

常用格式

雖然關(guān)于狀態(tài)的保存和回滾啰嗦了不少互躬，不過大多數(shù)情況下只需要記住下面的步驟就可以了：

save();      //保存狀態(tài)
...          //具體操作
restore();   //回滾到之前的狀態(tài)

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

三.總結(jié)

如本文一開始所說，合理的使用畫布操作可以幫助你用更容易理解的方式創(chuàng)作你想要的效果吼渡。

(,,? ? ?,,)

PS: 由于本人英文水平有限容为，某些地方可能存在誤解或詞語翻譯不準(zhǔn)確，如果你對(duì)此有疑問可以提交Issues進(jìn)行反饋寺酪。

About

本系列相關(guān)文章

作者微博: GcsSloop

四.參考資料

Canvas
canvas變換與操作
Canvas之translate坎背、scale、rotate房维、skew方法講解
Canvas的save(),saveLayer()和restore()淺談
Graphics->Layers