一.Canvas的常用操作速查表

二.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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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

⑵縮放(scale)

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

 public void scale (float sx, float sy)

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

• 1
• 2
• 3

• 1
• 2
• 3

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

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

如果在縮放時稍微注意一下就會發現縮放的中心預設為座標原點,而縮放中心軸就是座標軸，如下：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

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

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

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

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

為了效果明顯，這次我不僅添加了座標系而且對矩形中幾個重要的點進行了標註，具有相同字母標註的點是一一對應的。

由於本次未對縮放中心進行偏移，所有預設的縮放中心就是座標原點，中心軸就是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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

添加了這麼多的輔助內容，希望大家能夠看懂。

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

PS:和位移(translate)一樣，縮放也是可以疊加的。

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

• 1
• 2

• 1
• 2

呼叫兩次縮放則 x軸實際縮放為0.5x0.5=0.25 y軸實際縮放為0.5x0.1=0.05

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

⑶旋轉(rotate)

旋轉提供了兩種方法：

  public void rotate (float degrees)

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

• 1
• 2
• 3

• 1
• 2
• 3

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

預設的旋轉中心依舊是座標原點：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

改變旋轉中心位置：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

好吧，旋轉也是可疊加的

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

• 1
• 2

• 1
• 2

呼叫兩次旋轉，則實際的旋轉角度為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);
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

⑷錯切(skew)

skew這裡翻譯為錯切，錯切是特殊型別的線性變換。

錯切只提供了一種方法：

  public void skew (float sx, float sy)

• 1

• 1

引數含義：

float sx:將畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，

float sy:將畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值.

變換後:

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

• 1
• 2

• 1
• 2

示例：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

如你所想，錯切也是可疊加的，不過請注意，呼叫次序不同繪製結果也會不同

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

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

Q: 為什存在快照與回滾

A：畫布的操作是不可逆的，而且很多畫布操作會影響後續的步驟，例如第一個例子，兩個圓形都是在座標原點繪製的，而因為座標系的移動繪製出來的實際位置不同。所以會對畫布的一些狀態進行儲存和回滾。 

與之相關的API:

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

狀態棧：

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

這個棧可以儲存畫布狀態和圖層狀態。

Q：什麼是畫布和圖層？

A：實際上我們看到的畫布是由多個圖層構成的，如下圖(圖片來自網路)：

實際上我們之前講解的繪製操作和畫布操作都是在預設圖層上進行的。

在通常情況下，使用預設圖層就可滿足需求，但是如果需要繪製比較複雜的內容，如地圖(地圖可以有多個地圖層疊加而成，比如：政區層，道路層，興趣點層)等，則分圖層繪製比較好一些。

你可以把這些圖層看做是一層一層的玻璃板，你在每層的玻璃板上繪製內容，然後把這些玻璃板疊在一起看就是最終效果。 

SaveFlags

save

save 有兩種方法：

  // 儲存全部狀態
  public int save ()

  // 根據saveFlags引數儲存一部分狀態
  public int save (int saveFlags)

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

可以看到第二種方法比第一種多了一個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, <