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

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

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

自定義繪制概述

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

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

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

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

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

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

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

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

Paint 的完全攻略

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

拐角要什么形狀？

開不開雙線性過濾？

加不加特效？

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

Canvas 對繪制的輔助——范圍裁切和幾何變換。

范圍裁切：

幾何變換：

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

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

控制繪制順序解決的并不是「做不到」的問題，而是性能問題。同樣的一種效果，你不用繪制順序的控制往往也能做到，但需要用多個 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 的基礎掌握了，就能夠應付簡單的繪制需求。它們主要包括：

Canvas 類下的所有 draw- 打頭的方法，例如 drawCircle() drawBitmap()。

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);}@Overrideprotected 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、四葉花

贊賞

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

總結

以上是生活随笔為你收集整理的HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。