HenCoder Android 開發進階: 自定義 View 1-1 繪製基礎

扔物線發表於2017-07-09
AndroidView

從今天開始，HenCoder 就正式開講知識技能了。按照我的計劃，第一季是 UI，UI 一共分為三部分：繪製、佈局和觸控反饋。本期是繪製部分的第一期。繪製大概會用 5~6 期的時間講完，整個 UI 的繪製、佈局和觸控反饋三部分大概會用十來期。更新頻率大約為每週一更（不承諾喲）。

如果你不知道 HenCoder 是什麼，可以先看這裡：

HenCoder：給高階 Android 工程師的進階手冊

自定義繪製概述

二話不說，我反手就是一個視訊：（視訊掛了，先直接點到優酷去看吧：優酷連結）

首先總結一下視訊中的關鍵點：

  • 自定義繪製的方式是重寫繪製方法，其中最常用的是 onDraw()
  • 繪製的關鍵是 Canvas 的使用
    • Canvas 的繪製類方法： drawXXX() （關鍵引數：Paint）
    • Canvas 的輔助類方法：範圍裁切和幾何變換
  • 可以使用不同的繪製方法來控制遮蓋關係

概念已經在視訊裡全部講出來了，知識點並不多，但你可能也看出來了，我講得並不細。這是因為知識點雖然不多，但細節還是很多的，僅僅靠一節分享不可能講完。我按照順序把這些知識分成了 4 個級別，拆成幾節來講，你按照這 4 個級別的順序學習下來，就能夠平滑地逐步進階。

自定義繪製知識的四個級別

  1. Canvas 的 drawXXX() 系列方法及 Paint 最常見的使用

    Canvas.drawXXX() 是自定義繪製最基本的操作。掌握了這些方法，你才知道怎麼繪製內容，例如怎麼畫圓、怎麼畫方、怎麼畫影像和文字。組合繪製這些內容，再配合上 Paint 的一些常見方法來對繪製內容的顏色和風格進行簡單的配置，就能夠應付大部分的繪製需求了。

    今天這篇分享我要講的就是這些內容。也就是說，你在看完這篇文章並做完練習之後，上面這幾幅圖你就會繪製出來了。從今以後，你也很少再需要假裝一本正經地對設計師說「不行這個圖技術上實現不了」，也不用心驚膽戰得等待設計師的那句「那 iOS 怎麼可以」了。

  2. Paint 的完全攻略

    Paint 可以做的事，不只是設定顏色，也不只是我在視訊裡講的實心空心、線條粗細、有沒有陰影，它可以做的風格設定真的是非常多、非常細。例如：

    拐角要什麼形狀？

    開不開雙線性過濾？

    加不加特效？

可以調節的非常多，我就不一一列舉了。當你掌握到這個級別，就真的不會有什麼東西會是 iOS 能做到但你做不到的了。就算設計師再設計出了很難做的東西，做不出來的也不再會是你們 Android 組了。

  1. Canvas 對繪製的輔助——範圍裁切和幾何變換。

    範圍裁切：

    幾何變換：

    大多數時候，它們並不會被用到，但一旦用到，通常都是很炫酷的效果。範圍裁切和幾何變換都是用於輔助的，它們本身並不酷，讓它們變酷的是設計師們的想象力與創造力。而你要做的，是把他們的想象力與創造力變成現實。

  2. 使用不同的繪製方法來控制繪製順序

    控制繪製順序解決的並不是「做不到」的問題，而是效能問題。同樣的一種效果，你不用繪製順序的控制往往也能做到，但需要用多個 View 甚至是多層 View 才能拼湊出來，因此代價是 UI 的效能；而使用繪製順序的控制的話，一個 View 就全部搞定了。

自定義繪製的知識，大概就分為上面這四個級別。在你把這四個級別依次掌握了之後，你就是一個自定義繪製的高手了。它們具體的細節，我將分成幾篇來講。今天這篇就是第一篇： Canvas.drawXXX() 系列方法及 Paint 最基本的使用。我要正式開始嘍？

一切的開始：onDraw()

自定義繪製的上手非常容易：提前建立好 Paint 物件，重寫 onDraw()，把繪製程式碼寫在 onDraw() 裡面，就是自定義繪製最基本的實現。大概就像這樣：

Paint paint = new Paint();

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 繪製一個圓
    canvas.drawCircle(300, 300, 200, paint);
}複製程式碼

就這麼簡單。所以關於 onDraw() 其實沒什麼好說的，一個很普通的方法重寫，唯一需要注意的是別漏寫了 super.onDraw()。

Canvas.drawXXX() 和 Paint 基礎

drawXXX() 系列方法和 Paint 的基礎掌握了，就能夠應付簡單的繪製需求。它們主要包括：

  1. Canvas 類下的所有 draw- 打頭的方法，例如 drawCircle() drawBitmap()。
  2. Paint 類的幾個最常用的方法。具體是：
    • Paint.setStyle(Style style) 設定繪製模式
    • Paint.setColor(int color) 設定顏色
    • Paint.setStrokeWidth(float width) 設定線條寬度
    • Paint.setTextSize(float textSize) 設定文字大小
    • Paint.setAntiAlias(boolean aa) 設定抗鋸齒開關

對於比較習慣於自學的人（我就是這樣的人），你看到這裡就已經可以去 Google 的官方文件裡，開啟 Canvas 和 Paint 的頁面，把上面的這兩類方法學習一下，然後今天的內容就算結束了。當然，這篇文章也可以關掉了。

下面的內容就是展開講解上面的這兩類方法。

Canvas.drawColor(@ColorInt int color) 顏色填充

這是最基本的 drawXXX() 方法：在整個繪製區域統一塗上指定的顏色。

例如 drawColor(Color.BLACK) 會把整個區域染成純黑色，覆蓋掉原有內容； drawColor(Color.parse("#88880000") 會在原有的繪製效果上加一層半透明的紅色遮罩。

drawColor(Color.BLACK);  // 純黑複製程式碼

drawColor(Color.parse("#88880000"); // 半透明紅色複製程式碼

類似的方法還有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ，它們和 drawColor(color) 只是使用方式不同，作用都是一樣的。

canvas.drawRGB(100, 200, 100);
canvas.drawARGB(100, 100, 200, 100);複製程式碼

這類顏色填充方法一般用於在繪製之前設定底色，或者在繪製之後為介面設定半透明蒙版。

drawCircle(float centerX, float centerY, float radius, Paint paint) 畫圓

前兩個引數 centerX centerY 是圓心的座標，第三個引數 radius 是圓的半徑，單位都是畫素，它們共同構成了這個圓的基本資訊（即用這幾個資訊可以構建出一個確定的圓）；第四個引數 paint 我在視訊裡面已經說過了，它提供基本資訊之外的所有風格資訊，例如顏色、線條粗細、陰影等。

canvas.drawCircle(300, 300, 200, paint);複製程式碼

那位說：「你等會兒！先別往後講，你剛才說圓心的座標，我想問座標系在哪兒呢？沒座標系你跟我聊什麼座標啊。」

我想說：問得好（強行插入劇情）。在 Android 裡，每個 View 都有一個自己的座標系，彼此之間是不影響的。這個座標系的原點是 View 左上角的那個點；水平方向是 x 軸，右正左負；豎直方向是 y 軸，下正上負（注意，是下正上負，不是上正下負，和上學時候學的座標系方向不一樣）。也就是下面這個樣子。

所以一個 View 的座標 (x, y) 處，指的就是相對它的左上角那個點的水平方向 x 畫素、豎直方向 y 畫素的點。例如，(300, 300) 指的就是左上角的點向右 300 、向下 300 的位置； (100, -50) 指的就是左上角的點向右 100 、向上 50 的位置。

也就是說， canvas.drawCircle(300, 300, 200, paint) 這行程式碼繪製出的圓，在 View 中的位置和尺寸應該是這樣的：

圓心座標和半徑，這些都是圓的基本資訊，也是它的獨有資訊。什麼叫獨有資訊？就是隻有它有，別人沒有的資訊。你畫圓有圓心座標和半徑，畫方有嗎？畫橢圓有嗎？這就叫獨有資訊。獨有資訊都是直接作為引數寫進 drawXXX() 方法裡的（比如 drawCircle(centerX, centerY, radius, paint) 的前三個引數）。

而除此之外，其他的都是公有資訊。比如圖形的顏色、空心實心這些，你不管是畫圓還是畫方都有可能用到的，這些資訊則是統一放在 paint 引數裡的。

插播一： Paint.setColor(int color)

例如，你要畫一個紅色的圓，並不是寫成 canvas.drawCircle(300, 300, 200, RED, paint) 這樣，而是像下面這樣：

paint.setColor(Color.RED); // 設定為紅色
canvas.drawCircle(300, 300, 200, paint);複製程式碼

Paint.setColor(int color) 是 Paint 最常用的方法之一，用來設定繪製內容的顏色。你不止可以用它畫紅色的圓，也可以用它來畫紅色的矩形、紅色的五角星、紅色的文字。

插播二： Paint.setStyle(Paint.Style style)

而如果你想畫的不是實心圓，而是空心圓（或者叫環形），也可以使用 paint.setStyle(Paint.Style.STROKE) 來把繪製模式改為畫線模式。

paint.setStyle(Paint.Style.STROKE); // Style 修改為畫線模式
canvas.drawCircle(300, 300, 200, paint);複製程式碼

setStyle(Style style) 這個方法設定的是繪製的 Style 。Style 具體來說有三種： FILL, STROKE 和 FILL_AND_STROKE 。FILL 是填充模式，STROKE 是畫線模式（即勾邊模式），FILL_AND_STROKE 是兩種模式一併使用：既畫線又填充。它的預設值是 FILL，填充模式。

插播三： Paint.setStrokeWidth(float width)

在 STROKE 和 FILL_AND_STROKE 下，還可以使用 paint.setStrokeWidth(float width) 來設定線條的寬度：

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20); // 線條寬度為 20 畫素
canvas.drawCircle(300, 300, 200, paint);複製程式碼

插播四： 抗鋸齒

在繪製的時候，往往需要開啟抗鋸齒來讓圖形和文字的邊緣更加平滑。開啟抗鋸齒很簡單，只要在 new Paint() 的時候加上一個 ANTI_ALIAS_FLAG 引數就行：

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);複製程式碼

另外，你也可以使用 Paint.setAntiAlias(boolean aa) 來動態開關抗鋸齒。

抗鋸齒的效果如下：

可以看出，沒有開啟抗鋸齒的時候，圖形會有毛片現象，啊不，毛邊現象。所以一定記得要開啟抗鋸齒喲！

可以跳過的冷知識

好奇的人可能會問：抗鋸齒既然這麼有用，為什麼不預設開啟，或者乾脆把這個開關取消，自動讓所有繪製都開啟抗鋸齒？

短答案：因為抗鋸齒並不一定適合所有場景。

長答案：所謂的毛邊或者鋸齒，發生的原因並不是很多人所想象的「繪製太粗糙」「畫素計算能力不足」；同樣，抗鋸齒的原理也並不是選擇了更精細的演算法來算出了更平滑的圖形邊緣。
實質上，鋸齒現象的發生，只是由於圖形解析度過低，導致人眼察覺出了畫面中的畫素顆粒而已。換句話說，就算不開啟抗鋸齒，圖形的邊緣也已經是最完美的了，而並不是一個粗略計算的粗糙版本。
那麼，為什麼抗鋸齒開啟之後的圖形邊緣會更加平滑呢？因為抗鋸齒的原理是：修改圖形邊緣處的畫素顏色，從而讓圖形在肉眼看來具有更加平滑的感覺。一圖勝千言，上圖：


上面這個是把前面那兩個圓放大後的區域性效果。看到沒有？未開啟抗鋸齒的圓，所有畫素都是同樣的黑色，而開啟了抗鋸齒的圓，邊緣的顏色被略微改變了。這種改變可以讓人眼有邊緣平滑的感覺，但從某種角度講，它也造成了圖形的顏色失真。
所以，抗鋸齒好不好？好，大多數情況下它都應該是開啟的；但在極少數的某些時候，你還真的需要把它關閉。「某些時候」是什麼時候？到你用到的時候自然就知道了。

除了圓，Canvas 還可以繪製一些別的簡單圖形。它們的使用方法和 drawCircle() 大同小異，我就只對它們的 API 做簡單的介紹，不再做詳細的講解。

drawRect(float left, float top, float right, float bottom, Paint paint) 畫矩形

left, top, right, bottom 是矩形四條邊的座標。

paint.setStyle(Style.FILL);
canvas.drawRect(100, 100, 500, 500, paint);

paint.setStyle(Style.STROKE);
canvas.drawRect(700, 100, 1100, 500, paint);複製程式碼

另外，它還有兩個過載方法 drawRect(RectF rect, Paint paint) 和 drawRect(Rect rect, Paint paint) ，讓你可以直接填寫 RectF 或 Rect 物件來繪製矩形。

drawPoint(float x, float y, Paint paint) 畫點

x 和 y 是點的座標。點的大小可以通過 paint.setStrokeWidth(width) 來設定；點的形狀可以通過 paint.setStrokeCap(cap) 來設定：ROUND 畫出來是圓形的點，SQUARE 或 BUTT 畫出來是方形的點。（點還有形狀？是的，反正 Google 是這麼說的，你要問問 Google 去，我也很懵逼。）

注：Paint.setStrokeCap(cap) 可以設定點的形狀，但這個方法並不是專門用來設定點的形狀的，而是一個設定線條端點形狀的方法。端點有圓頭 (ROUND)、平頭 (BUTT) 和方頭 (SQUARE) 三種，具體會在下一節裡面講。

paint.setStrokeWidth(20);
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPoint(50, 50, paint);複製程式碼

paint.setStrokeWidth(20);
paint.setStrokeCap(Paint.Cap.SQUARE;
canvas.drawPoint(50, 50, paint);複製程式碼

好像有點像 FILL 模式下的 drawCircle() 和 drawRect() ？事實上確實是這樣的，它們和 drawPoint() 的繪製效果沒有區別。各位在使用的時候按個人習慣和實際場景來吧，哪個方便和順手用哪個。

drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint) 畫點（批量）

同樣是畫點，它和 drawPoint() 的區別是可以畫多個點。pts 這個陣列是點的座標，每兩個成一對；offset 表示跳過陣列的前幾個數再開始記座標；count 表示一共要繪製幾個點。說這麼多你可能越讀越暈，你還是自己試試吧，這是個看著複雜用著簡單的方法。

float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
// 繪製四個點：(50, 50) (50, 100) (100, 50) (100, 100)
canvas.drawPoints(points, 2 /* 跳過兩個數，即前兩個 0 */,
          8 /* 一共繪製 8 個數（4 個點）*/, paint);複製程式碼

drawOval(float left, float top, float right, float bottom, Paint paint) 畫橢圓

只能繪製橫著的或者豎著的橢圓，不能繪製斜的（斜的倒是也可以，但不是直接使用 drawOval()，而是配合幾何變換，後面會講到）。left, top, right, bottom 是這個橢圓的左、上、右、下四個邊界點的座標。

paint.setStyle(Style.FILL);
canvas.drawOval(50, 50, 350, 200, paint);

paint.setStyle(Style.STROKE);
canvas.drawOval(400, 50, 700, 200, paint);複製程式碼

另外，它還有一個過載方法 drawOval(RectF rect, Paint paint)，讓你可以直接填寫 RectF 來繪製橢圓。

drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 畫線

startX, startY, stopX, stopY 分別是線的起點和終點座標。

canvas.drawLine(200, 200, 800, 500, paint);複製程式碼

由於直線不是封閉圖形，所以 setStyle(style) 對直線沒有影響。

drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint) 畫線（批量）

drawLines() 是 drawLine() 的複數版。

float[] points = {20, 20, 120, 20, 70, 20, 70, 120, 20, 120, 120, 120, 150, 20, 250, 20, 150, 20, 150, 120, 250, 20, 250, 120, 150, 120, 250, 120};
canvas.drawLines(points, paint);複製程式碼

咦，不小心打出兩個漢字。——是漢字吧？

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 畫圓角矩形

left, top, right, bottom 是四條邊的座標，rx 和 ry 是圓角的橫向半徑和縱向半徑。

canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);複製程式碼

另外，它還有一個過載方法 drawRoundRect(RectF rect, float rx, float ry, Paint paint)，讓你可以直接填寫 RectF 來繪製圓角矩形。

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 繪製弧形或扇形

drawArc() 是使用一個橢圓來描述弧形的。left, top, right, bottom 描述的是這個弧形所在的橢圓；startAngle 是弧形的起始角度（x 軸的正向，即正右的方向，是 0 度的位置；順時針為正角度，逆時針為負角度），sweepAngle 是弧形劃過的角度；useCenter 表示是否連線到圓心，如果不連線到圓心，就是弧形，如果連線到圓心，就是扇形。

paint.setStyle(Paint.Style.FILL); // 填充模式
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); // 繪製扇形
canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint); // 繪製弧形
paint.setStyle(Paint.Style.STROKE); // 畫線模式
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); // 繪製不封口的弧形複製程式碼

到此為止，以上就是 Canvas 所有的簡單圖形的繪製。除了簡單圖形的繪製， Canvas 還可以使用 drawPath(Path path) 來繪製自定義圖形。

drawPath(Path path, Paint paint) 畫自定義圖形

這個方法有點複雜，需要展開說一下。

前面的這些方法，都是繪製某個給定的圖形，而 drawPath() 可以繪製自定義圖形。當你要繪製的圖形比較特殊，使用前面的那些方法做不到的時候，就可以使用 drawPath() 來繪製。

drawPath(path) 這個方法是通過描述路徑的方式來繪製圖形的，它的 path 引數就是用來描述圖形路徑的物件。path 的型別是 Path ，使用方法大概像下面這樣：

public class PathView extends View {

    Paint paint = new Paint();
    Path path = new Path(); // 初始化 Path 物件

    ......

    {
      // 使用 path 對圖形進行描述（這段描述程式碼不必看懂）
      path.addArc(200, 200, 400, 400, -225, 225);
      path.arcTo(400, 200, 600, 400, -180, 225, false);
      path.lineTo(400, 542);
    }

    @Override
    protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);

      canvas.drawPath(path, paint); // 繪製出 path 描述的圖形（心形），大功告成
    }
}複製程式碼

Path 可以描述直線、二次曲線、三次曲線、圓、橢圓、弧形、矩形、圓角矩形。把這些圖形結合起來，就可以描述出很多複雜的圖形。下面我就說一下具體的怎麼把這些圖形描述出來。

Path 有兩類方法，一類是直接描述路徑的，另一類是輔助的設定或計算。

Path 方法第一類：直接描述路徑。

這一類方法還可以細分為兩組：新增子圖形和畫線（直線或曲線）

第一組： addXxx() ——新增子圖形
addCircle(float x, float y, float radius, Direction dir) 新增圓

x, y, radius 這三個引數是圓的基本資訊，最後一個引數 dir 是畫圓的路徑的方向。

路徑方向有兩種：順時針 (CW clockwise) 和逆時針 (CCW counter-clockwise) 。對於普通情況，這個引數填 CW 還是填 CCW 沒有影響。它只是在需要填充圖形 (Paint.Style 為 FILL 或 FILL_AND_STROKE) ，並且圖形出現自相交時，用於判斷填充範圍的。比如下面這個圖形：

是應該填充成這樣呢：

還是應該填充成這樣呢：

想用哪種方式來填充，都可以由你來決定。具體怎麼做，下面在講 Path.setFillType() 的時候我會詳細介紹，而在這裡你可以先忽略 dir 這個引數。

在用 addCircle() 為 Path 中新增一個圓之後，呼叫 canvas.drawPath(path, paint) ，就能畫一個圓出來。就像這樣：

path.addCircle(300, 300, 200, Path.Direction.CW);

...

canvas.drawPath(path, paint);複製程式碼

可以看出，path.AddCircle(x, y, radius, dir) + canvas.drawPath(path, paint) 這種寫法，和直接使用 canvas.drawCircle(x, y, radius, paint) 的效果是一樣的，區別只是它的寫法更復雜。所以如果只畫一個圓，沒必要用 Path，直接用 drawCircle() 就行了。drawPath() 一般是在繪製組合圖形時才會用到的。

其他的 Path.add-() 方法和這類似，例如：

addOval(float left, float top, float right, float bottom, Direction dir) / addOval(RectF oval, Direction dir) 新增橢圓
addRect(float left, float top, float right, float bottom, Direction dir) / addRect(RectF rect, Direction dir) 新增矩形
addRoundRect(RectF rect, float rx, float ry, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir) / addRoundRect(RectF rect, float[] radii, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float[] radii, Direction dir) 新增圓角矩形
addPath(Path path) 新增另一個 Path

上面這幾個方法和 addCircle() 的使用都差不多，不再做過多介紹。

第二組：xxxTo() ——畫線（直線或曲線）

這一組和第一組 addXxx() 方法的區別在於，第一組是新增的完整封閉圖形（除了 addPath() ），而這一組新增的只是一條線。

lineTo(float x, float y) / rLineTo(float x, float y) 畫直線

從當前位置向目標位置畫一條直線， x 和 y 是目標位置的座標。這兩個方法的區別是，lineTo(x, y) 的引數是絕對座標，而 rLineTo(x, y) 的引數是相對當前位置的相對座標 （字首 r 指的就是 relatively 「相對地」)。

當前位置：所謂當前位置，即最後一次呼叫畫 Path 的方法的終點位置。初始值為原點 (0, 0)。

paint.setStyle(Style.STROKE);
path.lineTo(100, 100); // 由當前位置 (0, 0) 向 (100, 100) 畫一條直線
path.rLineTo(100, 0); // 由當前位置 (100, 100) 向正右方 100 畫素的位置畫一條直線複製程式碼

quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float dx1, float dy1, float dx2, float dy2) 畫二次貝塞爾曲線

這條二次貝塞爾曲線的起點就是當前位置，而引數中的 x1, y1 和 x2, y2 則分別是控制點和終點的座標。和 rLineTo(x, y) 同理，rQuadTo(dx1, dy1, dx2, dy2) 的引數也是相對座標

貝塞爾曲線：貝塞爾曲線是幾何上的一種曲線。它通過起點、控制點和終點來描述一條曲線，主要用於計算機圖形學。概念總是說著容易聽著難，總之使用它可以繪製很多圓潤又好看的圖形，但要把它熟練掌握、靈活使用卻是不容易的。不過還好的是，一般情況下，貝塞爾曲線並沒有什麼用處，只在少數場景下繪製一些特殊圖形的時候才會用到，所以如果你還沒掌握自定義繪製，可以先把貝塞爾曲線放一放，稍後再學也完全沒問題。至於怎麼學，貝塞爾曲線的知識網上一搜一大把，我這裡就不講了。

cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) / rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3) 畫三次貝塞爾曲線

和上面這個 quadTo() rQuadTo() 的二次貝塞爾曲線同理，cubicTo() 和 rCubicTo() 是三次貝塞爾曲線，不再解釋。

moveTo(float x, float y) / rMoveTo(float x, float y) 移動到目標位置

不論是直線還是貝塞爾曲線，都是以當前位置作為起點，而不能指定起點。但你可以通過 moveTo(x, y) 或 rMoveTo() 來改變當前位置，從而間接地設定這些方法的起點。

paint.setStyle(Style.STROKE);
path.lineTo(100, 100); // 畫斜線
path.moveTo(200, 100); // 我移~~
path.lineTo(200, 0); // 畫豎線複製程式碼

moveTo(x, y) 雖然不新增圖形，但它會設定圖形的起點，所以它是非常重要的一個輔助方法。

另外，第二組還有兩個特殊的方法： arcTo() 和 addArc()。它們也是用來畫線的，但並不使用當前位置作為弧線的起點。

arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle) 畫弧形

這個方法和 Canvas.drawArc() 比起來，少了一個引數 useCenter，而多了一個引數 forceMoveTo 。

少了 useCenter ，是因為 arcTo() 只用來畫弧形而不畫扇形，所以不再需要 useCenter 引數；而多出來的這個 forceMoveTo 引數的意思是，繪製是要「抬一下筆移動過去」，還是「直接拖著筆過去」，區別在於是否留下移動的痕跡。

paint.setStyle(Style.STROKE);
path.lineTo(100, 100);
path.arcTo(100, 100, 300, 300, -90, 90, true); // 強制移動到弧形起點（無痕跡）複製程式碼

paint.setStyle(Style.STROKE);
path.lineTo(100, 100);
path.arcTo(100, 100, 300, 300, -90, 90, false); // 直接連線連到弧形起點（有痕跡）複製程式碼

addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle) / addArc(RectF oval, float startAngle, float sweepAngle)

又是一個弧形的方法。一個叫 arcTo ，一個叫 addArc()，都是弧形，區別在哪裡？其實很簡單： addArc() 只是一個直接使用了 forceMoveTo = true 的簡化版 arcTo() 。

paint.setStyle(Style.STROKE);
path.lineTo(100, 100);
path.addArc(100, 100, 300, 300, -90, 90);複製程式碼

close() 封閉當前子圖形

它的作用是把當前的子圖形封閉，即由當前位置向當前子圖形的起點繪製一條直線。

paint.setStyle(Style.STROKE);
path.moveTo(100, 100);
path.lineTo(200, 100);
path.lineTo(150, 150);
// 子圖形未封閉複製程式碼

paint.setStyle(Style.STROKE);
path.moveTo(100, 100);
path.lineTo(200, 100);
path.lineTo(150, 150);
path.close(); // 使用 close() 封閉子圖形。等價於 path.lineTo(100, 100)複製程式碼

close() 和 lineTo(起點座標) 是完全等價的。

「子圖形」：官方文件裡叫做 contour 。但由於在這個場景下我找不到這個詞合適的中文翻譯（直譯的話叫做「輪廓」），所以我換了個便於中國人理解的詞：「子圖形」。前面說到，第一組方法是「新增子圖形」，所謂「子圖形」，指的就是一次不間斷的連線。一個 Path 可以包含多個子圖形。當使用第一組方法，即 addCircle() addRect() 等方法的時候，每一次方法呼叫都是新增了一個獨立的子圖形；而如果使用第二組方法，即 lineTo() arcTo() 等方法的時候，則是每一次斷線（即每一次「抬筆」），都標誌著一個子圖形的結束，以及一個新的子圖形的開始。

另外，不是所有的子圖形都需要使用 close() 來封閉。當需要填充圖形時（即 Paint.Style 為 FILL 或 FILL_AND_STROKE），Path 會自動封閉子圖形。

paint.setStyle(Style.FILL);
path.moveTo(100, 100);
path.lineTo(200, 100);
path.lineTo(150, 150);
// 這裡只繪製了兩條邊，但由於 Style 是 FILL ，所以繪製時會自動封口複製程式碼

以上就是 Path 的第一類方法：直接描述路徑的。

Path 方法第二類：輔助的設定或計算

這類方法的使用場景比較少，我在這裡就不多講了，只講其中一個方法： setFillType(FillType fillType)。

Path.setFillType(Path.FillType ft) 設定填充方式

前面在說 dir 引數的時候提到， Path.setFillType(fillType) 是用來設定圖形自相交時的填充演算法的：

方法中填入不同的 FillType 值，就會有不同的填充效果。FillType 的取值有四個：

  • EVEN_ODD
  • WINDING （預設值）
  • INVERSE_EVEN_ODD
  • INVERSE_WINDING

其中後面的兩個帶有 INVERSE_ 字首的，只是前兩個的反色版本，所以只要把前兩個，即 EVEN_ODD 和 WINDING，搞明白就可以了。

EVEN_ODD 和 WINDING 的原理有點複雜，直接講出來的話資訊量太大，所以我先給一個簡單粗暴版的總結，你感受一下： WINDING 是「全填充」，而 EVEN_ODD 是「交叉填充」：

之所以叫「簡單粗暴版」，是因為這些只是通常情形下的效果；而如果要準確瞭解它們在所有情況下的效果，就得先知道它們的原理，即它們的具體演算法。

EVEN_ODD 和 WINDING 的原理

EVEN_ODD

即 even-odd rule （奇偶原則）：對於平面中的任意一點，向任意方向射出一條射線，這條射線和圖形相交的次數（相交才算，相切不算哦）如果是奇數，則這個點被認為在圖形內部，是要被塗色的區域；如果是偶數，則這個點被認為在圖形外部，是不被塗色的區域。還以左右相交的雙圓為例：

射線的方向無所謂，同一個點射向任何方向的射線，結果都是一樣的，不信你可以試試。

從上圖可以看出，射線每穿過圖形中的一條線，內外狀態就發生一次切換，這就是為什麼 EVEN_ODD 是一個「交叉填充」的模式。

WINDING

即 non-zero winding rule （非零環繞數原則）：首先，它需要你圖形中的所有線條都是有繪製方向的：

然後，同樣是從平面中的點向任意方向射出一條射線，但計算規則不一樣：以 0 為初始值，對於射線和圖形的所有交點，遇到每個順時針的交點（圖形從射線的左邊向右穿過）把結果加 1，遇到每個逆時針的交點（圖形從射線的右邊向左穿過）把結果減 1，最終把所有的交點都算上，得到的結果如果不是 0，則認為這個點在圖形內部，是要被塗色的區域；如果是 0，則認為這個點在圖形外部，是不被塗色的區域。

和 EVEN_ODD 相同，射線的方向並不影響結果。

所以，我前面的那個「簡單粗暴」的總結，對於 WINDING 來說並不完全正確：如果你所有的圖形都用相同的方向來繪製，那麼 WINDING 確實是一個「全填充」的規則；但如果使用不同的方向來繪製圖形，結果就不一樣了。

圖形的方向：對於新增子圖形類方法（如 Path.addCircle() Path.addRect()）的方向，由方法的 dir 引數來控制，這個在前面已經講過了；而對於畫線類的方法（如 Path.lineTo() Path.arcTo()）就更簡單了，線的方向就是圖形的方向。

所以，完整版的 EVEN_ODD 和 WINDING 的效果應該是這樣的：

而 INVERSE_EVEN_ODD 和 INVERSE_WINDING ，只是把這兩種效果進行反轉而已，你懂了 EVEN_ODD 和 WINDING ，自然也就懂 INVERSE_EVEN_ODD 和 INVERSE_WINDING 了，我就不講了。

好，花了好長的篇幅來講 drawPath(path) 和 Path，終於講完了。同時， Canvas 對圖形的繪製就也講完了。圖形簡單時，使用 drawCircle() drawRect() 等方法來直接繪製；圖形複雜時，使用 drawPath() 來繪製自定義圖形。

除此之外， Canvas 還可以繪製 Bitmap 和文字。

drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 畫 Bitmap

繪製 Bitmap 物件，也就是把這個 Bitmap 中的畫素內容貼過來。其中 left 和 top 是要把 bitmap 繪製到的位置座標。它的使用非常簡單。

drawBitmap(bitmap, 200, 100, paint);複製程式碼

它的過載方法：

drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint) /
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) /
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

drawBitmap 還有一個兄弟方法 drawBitmapMesh()，可以繪製具有網格拉伸效果的 Bitmap。 drawBitmapMesh() 的使用場景較少，所以不講了，如果有興趣你可以自己研究一下。

drawText(String text, float x, float y, Paint paint) 繪製文字

介面裡所有的顯示內容，都是繪製出來的，包括文字。 drawText() 這個方法就是用來繪製文字的。引數 text 是用來繪製的字串，x 和 y 是繪製的起點座標。

canvas.drawText(text, 200, 100, paint);複製程式碼

插播五： Paint.setTextSize(float textSize)

通過 Paint.setTextSize(textSize)，可以設定文字的大小。

paint.setTextSize(18);
canvas.drawText(text, 100, 25, paint);
paint.setTextSize(36);
canvas.drawText(text, 100, 70, paint);
paint.setTextSize(60);
canvas.drawText(text, 100, 145, paint);
paint.setTextSize(84);
canvas.drawText(text, 100, 240, paint);複製程式碼

設定文字的位置和尺寸，這些只是繪製文字最基本的操作。文字的繪製具有極高的定製性，不過由於它的定製性實在太高了，所以我會在後面專門用一期來講文字的繪製。這一期就不多講了。

嗯……就這樣吧。繪製部分第一節， Canvas 的 drawXXX() 系列方法和 Paint 的基本使用，就到這裡。

練習專案

為了避免轉頭就忘，強烈建議你趁熱打鐵，做一下這個練習專案：HenCoderPracticeDraw1

下期預告

下期是 Paint 的全面介紹，內容會比這期難，但也會更有趣，各位做好準備吧。最後再貼一次下節內容的部分圖片作為預告：

感謝

感謝參與這期預釋出內測的讀者：

jiahuaAndroid、huajinyuan、quhuainan、Van Gogh、停停走走、JK森、街 景、Tiger、意琦行_、MadisonRong、AaronYi、czwathou、別對生活說抱歉、hml、四葉花

讚賞

你給不給我錢，我都會認真做、全心做。所以給錢之前請慎重考慮，確定你是要讚賞，而不是購買服務。

相關文章