上一篇內(nèi)容自定義View（Canvas）
http://www.lxweimin.com/p/d25fb10ad34e

Path這東西，這東西太麻煩了，牽扯的東西很多。但是又特別重要，所以一定要寫，思路不清晰的地方回頭再整理吧。

前面我們已經(jīng)用canvas的drawXxx()方法繪制了一些簡單的基本圖形，但這顯然遠遠不能滿足我們的需求。比如我們想繪制一些稍微復(fù)雜一點(如繪制一個心形 正多邊形 五角星等)的圖形就沒法去繪制，而使用Path不僅能夠繪制簡單圖形，也可以繪制這些比較復(fù)雜的圖形。另外，根據(jù)路徑繪制文本和剪裁畫布都會用到Path。以下是Path類中常用到的方法:

注意：我們可以把path看成是存儲操作軌跡的一個容器，我們把希望進行的操作軌跡記錄在path中。由Canvas的drawPath()方法把path記錄的圖形真正繪制到畫布上

然后我們簡單的把path分一個類：

接下來看看path的一些主要方法

xxxTo()系列

xxxTo家族成員主要有：

public void moveTo(float x, float y)
public void lineTo(float x, float y)
public void quadTo(float x1, float y1, float x2, float y2)
public void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)  
public void arcTo (RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)  

moveTo()

將繪制的起點移動到某處，打個比方，比如要寫字，moveTo()方法則是把筆尖移動到紙的相應(yīng)位置，準備開始書寫

lineTo()

在上一次操作結(jié)束的點與參數(shù)坐標點之間連一條線

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        Path path = new Path();// 創(chuàng)建Path

        path.moveTo(100,100);//移動繪制點
        path.lineTo(200,100);//從(100,100)位置畫一條線到(200,100)位置
        path.lineTo(200,200);//從(200,100)位置畫一條線到(200,200)位置
        //path.close();閉合區(qū)域

        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(15);
        canvas.drawPath(path, mPaint);// 繪制Path
    }

通過兩次lineTo()方法繪制了兩條線段:

//path.close();

這一句代碼的注釋，顯示如下：

arcTo()

這是一個畫弧線的方法，原理是從一個橢圓上截取一段弧

public void arcTo (RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)

這個方法（還有兩個重載方法，大同小異，這里只講這一個）有四個參數(shù)：
RectF oval：用于確定橢圓（重要說明:該RectF 的4個參數(shù)必須遵從left，top，right，bottom的順序，否則無法畫出弧線）
float startAngle：起始角度
float sweepAngle：掃過的角度，順時針方向為正
boolean forceMoveTo：用于確定是否與上一點連接（是否抬起筆）

這樣說可能有點抽象,看代碼：

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        RectF rectF = new RectF(0,0,300,200);//用于繪制橢圓

        Path path = new Path();// 創(chuàng)建Path

        path.moveTo(0,0);
        path.arcTo(rectF,0,60,false);//截取0度到60度之間的弧

        mPaint.setColor(Color.RED);
        canvas.drawPath(path, mPaint);// 繪制Path
    }

因為這里forceMoveTo參數(shù)設(shè)置為false，所以不抬起筆（連接上一點）。

如果把forceMoveTo參數(shù)設(shè)置為true（抬起筆）：

最后，quadTo()和cubicTo()方法是分別繪制二階和三階貝塞爾曲線的方法,我們先了解一下貝塞爾曲線

什么叫貝賽爾曲線？其實很簡單，使用三個或多個點來確定的一條曲線，貝塞爾曲線在圖形圖像學(xué)中有相當(dāng)重要的地位，Path中也提供了一些方法來給我們模擬低階貝賽爾曲線。
貝塞爾曲線的定義也比較簡單，你只需要一個起點、一個終點和至少零個控制點則可定義一個貝賽爾曲線，當(dāng)控制點為零時，只有起點和終點，此時的曲線說白了就是一條線段，我們稱之為一階貝賽爾曲線。
PS：以下圖片和公式均來自維基百科和互聯(lián)網(wǎng)

一階貝賽爾曲線：

二階貝賽爾曲線：

三階貝賽爾曲線：

高階貝塞爾曲線：
四階：

quadTo()

quadTo方法有四個參數(shù)，前兩個參數(shù)為控制點的坐標，后兩個參數(shù)為終點坐標，至于起點默認是畫布的左上角。這里的屏幕中心就是起點，(x1,y1)就是中點P1，(x2,y2)就是末端點P2。
看一下代碼：

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        Path path = new Path();// 創(chuàng)建Path

        path.quadTo(100,100,200,0);//繪制二階貝塞爾曲線

        mPaint.setColor(Color.RED);
        canvas.drawPath(path, mPaint);// 繪制Path

        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(15);//加粗 便于顯示
        canvas.drawPoint(0,0,mPaint);//繪制起點
        canvas.drawPoint(100,100,mPaint);//繪制控制點
        canvas.drawPoint(200,0,mPaint);//繪制終點
    }

cubicTo

使用方法與quadTo()方法相同，前4個參數(shù)分別為兩個控制點，最后兩個參數(shù)是終點

總結(jié)一下：xxxTo()方法的作用是從某一位置連接（除moveTo）到另一位置。

addXxx()系列

add家族成員主要有：addRect, addRoundRect, addOval, addCircle, addPath, addArc
前面幾個方法小伙伴們一看就知道啥東西了。和上一期講的內(nèi)容相似，只不過是把基礎(chǔ)圖形添加到path中繪制。
以addRect為例，

public void addRect(RectF rect, Direction dir)

第二個參數(shù)是一個枚舉，有Path.Direction.CW和Path.Direction.CCW兩種選擇，分別代表順時針和逆時針的閉合方向（所有add封閉型path都需要這個參數(shù)）。什么叫閉合方向呢？光說大家一定會蒙，有學(xué)習(xí)激情的童鞋看到后肯定會馬上敲代碼試驗一下兩者的區(qū)別，可是不管你如何改，單獨地在一條閉合曲線上你是看不出所謂閉合方向的區(qū)別的。為了弄懂它，我們在path上繪制一些文字來說明最后參數(shù)的意義：

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        Path path = new Path();// 創(chuàng)建Path
        path.addRect(100,100,300,200, Path.Direction.CW);

        mPaint.setTextSize(50);
        // 繪制路徑上的文字
        canvas.drawTextOnPath("abcdefghijklmn", path, 0, 0, mPaint);
    }

順時針

逆時針

addArc()

這東西咋一看和arcTo()很像，沒錯，事實上也差不多。
addArc(參數(shù)一,參數(shù)二,參數(shù)三)等價于arcTo(參數(shù)一,參數(shù)二,參數(shù)三,true);

addPath()

顧名思義，把一個path添加到另一個path中:

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        RectF rectF = new RectF(100,100,400,300);

        Path path = new Path();
        path.addRect(rectF, Path.Direction.CW);

        Path path1 = new Path();
        path1.addOval(rectF, Path.Direction.CW);

        path1.addPath(path);
//        path1.addPath(path,100,100);//后兩個參數(shù)控制平移

        canvas.drawPath(path1,mPaint);
    }

結(jié)果如下：

如果添加上兩個參數(shù)，則在X軸和Y軸方向上分別平移了100px：

rXXXTo()系列

rXXXTo()系列基本上是XXXTo()系列的小弟

public void rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3)  
public void rLineTo(float dx, float dy)  
public void rMoveTo(float dx, float dy)  
public void rQuadTo(float dx1, float dy1, float dx2, float dy2)  

這一系列rXXXTo方法其實跟上面的那些XXXTo差不多的，唯一的不同是rXXXTo方法的參考坐標是相對的而XXXTo方法的參考坐標始終是參照畫布原點坐標，什么意思呢？舉個簡單的例子：

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        Path path = new Path();
        path.moveTo(100,100);
        path.lineTo(200,200);
        //path.rLineTo(200,200);

        canvas.drawPath(path,mPaint);
    }

把path.lineTo(200,200);換成path.rLineTo(200,200);結(jié)果如下：

線段長了很多，因為這里的(200,200)是相對于開始點(100,100)來說的，是相對坐標。如果換算成絕對坐標就是繪制一條(100,100)到(300,300)之間的線段。其實，這個前綴“r”也就是relative（相對）的簡寫！

其他幾個比較重要的方法

setLastPoint()

重置當(dāng)前path中最后一個點位置，會對上一次的繪制造成影響。

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        Path path = new Path();
        path.lineTo(200,200);
        path.setLastPoint(300,200);
        canvas.drawPath(path,mPaint);
        mPaint.setStrokeWidth(15);//加粗，便于顯示
        mPaint.setColor(Color.RED);
        canvas.drawPoint(200,200,mPaint);
    }

雖然我們lineTo（200，200），但是緊接著調(diào)用setLastPoint(300,200)方法，把最后一個點移動到（300，200）的位置，所以所畫的直線是從原點到（300，200）的位置

offset()

對當(dāng)前路徑之前的操作進行偏移(不會影響之后的操作)

//將新的path賦值到現(xiàn)有path
public void offset (float dx, float dy)
//將新的path賦值到dst,不影響現(xiàn)有path，當(dāng)dst為null時，效果同上一種方法
public void offset (float dx, float dy, Path dst)

參數(shù)：
dx：X軸方向上的平移
dy：Y軸方向上的平移
dst：用于儲存平移后的結(jié)果

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        //繪制坐標系
        float [] pts = new float[]{0,0,mWidth/2,0,0,0,0,mHeight/2};
        mPaint.setColor(Color.BLACK);
        canvas.drawLines(pts,mPaint);

        Path path = new Path();                     // path中添加一個圓形(圓心在坐標原點)
        path.addCircle(0,0,100, Path.Direction.CW);

        Path dst = new Path();                      // dst中添加一個矩形
        dst.addRect(-200,-200,200,200, Path.Direction.CW);

        path.offset(300,0,dst);                     // 平移

        canvas.drawPath(path,mPaint);               // 繪制path

        mPaint.setColor(Color.BLUE);                // 更改畫筆顏色

        canvas.drawPath(dst,mPaint);                // 繪制dst
    }

1500287070(1).jpg

結(jié)語

剩余的一些方法比較簡單，查看上面的表就可以了