Android——詳解Paint的setPathEffect(PathEffect effect)

一、setPathEffect()

這個方法一看就和path有關，顧名思義，它就是給path設置樣式（效果）的。PathEffect這個路徑效果類沒有具體的實現，效果是由它的六個子類實現的：
這六個子類分別可以實現不同的路徑效果：

下面，我們來用代碼來具體實現一下。

二、測試代碼

2.1 代碼框架

首先初始化paint和path，然後配置相關屬性，最後作畫。

package com.kale.cview;
public class CustomView extends View {

    // 實例化畫筆
    private Paint mPaint = null;
    private Path mPath;// 路徑對象
    private Context mContext;

    public CustomView(Context context) {
        super(context);
    }

    /**
     * 當你要給view添加attribute的時候就需要用到這個構造
     * 
     * @param context
     * @param attrs
     */
    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;

        // 初始化畫筆
        initPaint();
        initPath();
    }

    private void initPaint() {
        // 實例化畫筆並打開抗鋸齒
        // mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);  
        mPaint.setStrokeWidth(5);  
        mPaint.setColor(Color.DKGRAY);  
    }

    private void initPath() {
        // 實例化路徑
        mPath = new Path();
        // 定義路徑的起點
        mPath.moveTo(10, 50);

        // 定義路徑的各個點
        for (int i = 0; i <= 30; i++) {
            mPath.lineTo(i * 35, (float) (Math.random() * 100));
        }
    }


    /*
     * 繪製view時調用的方法，可能會出現多次調用，所以不建議在這裏面實例化對象，也就是不要出現new
     * 
     * @param canvas 一個畫布對象，我們可以用paint在上面畫畫
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        /*
         * 繪製路徑
         */
        // 沒有做處理，還沒有寫代碼
       
        canvas.drawPath(mPath, mPaint);
    }
}

2.2 不設置效果

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        // 沒有做處理，顯示生硬
        mPaint.setPathEffect(null);
        canvas.drawPath(mPath, mPaint);
    }

2.3 CornerPathEffect

CornerPathEffect則可以將路徑的轉角變得圓滑，CornerPathEffect的構造方法只接受一個參數radius，意思就是轉角處的圓滑程度。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        mPaint.setPathEffect(new CornerPathEffect(50));
        canvas.drawPath(mPath, mPaint);
    }

2.4 DiscretePathEffect

DiscretePathEffect（離散路徑效果）相對來說則稍微複雜點，其會在路徑上繪製很多“雜點”的突出來模擬一種類似生鏽鐵絲的效果。其構造方法有兩個參數：

第一個呢指定這些突出的“雜點”的密度，值越小雜點越密集；
第二個參數呢則是“雜點”突出的大小，值越大突出的距離越大反之反之。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        mPaint.setPathEffect(new DiscretePathEffect(3.0F, 5.0F));
        canvas.drawPath(mPath, mPaint);
    }

當我們設置雜點密度很大，突出距離較小時，你會發現線條也變得柔和了起來。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        mPaint.setPathEffect(new DiscretePathEffect(10.0F, 2.0F));
        canvas.drawPath(mPath, mPaint);
    }

2.5 DashPathEffect

它的效果相對與上面兩種路徑效果來說要略顯複雜，其雖說也是包含了兩個參數：

第一個參數是一個浮點型的數組，那這個數組有什麼意義呢？其實是這樣的，我們在定義該參數的時候只要浮點型數組中元素個數大於等於2即可，也就是說上面我們的代碼可以寫成這樣的：·

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        mPaint.setPathEffect(new DashPathEffect(new float[] {20, 10}, 1));
        canvas.drawPath(mPath, mPaint);
    }

loat[] {20, 10}的偶數參數20（注意數組下標是從0開始哦）定義了我們第一條實線的長度，而奇數參數10則表示第一條虛線的長度，如果此時數組後面不再有數據則重複第一個數以此往復循環，整條線就成了[20,10,20,10,20,10…………………………]這麼一個狀態。當然如果你想要對每個實線和虛線進行設置，你可以這樣：

mEffects[3] = new DashPathEffect(new float[] {20, 10, 50, 5, 100, 30, 10, 5}, mPhase);  

而DashPathEffect的第二個參數（phase）我稱之爲偏移值，動態改變其值會讓路徑產生動畫的效果。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        mPaint.setPathEffect(new DashPathEffect(new float[] {20, 10}, phase));
        canvas.drawPath(mPath, mPaint);
        
        // 改變偏移值
        phase++;
        // 重繪，產生動畫效果
        invalidate();
    }

2.6 PathDashPathEffect

PathDashPathEffect和DashPathEffect是類似的，不同的是PathDashPathEffect可以讓我們自己定義路徑虛線的樣式，比如我們將其換成一個個小圓組成的虛線：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 把畫布往下移動250
        canvas.translate(0, 250);  
        /*
         * 繪製路徑
         */
        Path path = new Path();  
        path.addCircle(0, 0, 3, Direction.CCW);  
        PathEffect pathEffect = new PathDashPathEffect(path, 12, phase, PathDashPathEffect.Style.ROTATE);  
        
        mPaint.setPathEffect(pathEffect);
        canvas.drawPath(mPath, mPaint);
        
        // 改變偏移值
        phase++;
        // 重繪，產生動畫效果
        invalidate();
    }

2.7 ComposePathEffect和SumPathEffect

ComposePathEffect和SumPathEffect都可以用來組合兩種路徑效果，就是把兩種效果二合一。唯一不同的是組合的方式：

ComposePathEffect(PathEffect outerpe, PathEffect innerpe)會先將路徑變成innerpe的效果，再去複合outerpe的路徑效果，即：outerpe(innerpe(Path))；

SumPathEffect(PathEffect first, PathEffect second)則會把兩種路徑效果加起來再作用於路徑。