閱讀(9.6k) 書(shū)簽贊(0) 我要糾錯(cuò)

Android Paint API之—— PathEffect(路徑效果)

2023-03-31 14:21 更新

本節(jié)引言：

本節(jié)繼續(xù)來(lái)學(xué)習(xí)Paint的API——PathEffect(路徑效果)，我們把畫(huà)筆的sytle設(shè)置為Stroke，可以繪制一個(gè)個(gè)由線(xiàn)構(gòu)成的圖形，而這些線(xiàn)偶爾會(huì)顯得單調(diào)是吧，比如你想把這些先改成虛線(xiàn)，又或者想讓路徑的轉(zhuǎn)角變得圓滑等，那你就可以考慮使用這個(gè)PathEffect來(lái)實(shí)現(xiàn)了！

官方API文檔：PathEffect 進(jìn)去看文檔，可以發(fā)現(xiàn)這個(gè)PathEffect和我們前面學(xué)的MaskFilter(面具)與ColorFilter(顏色過(guò)濾器)一樣，幾乎沒(méi)有可用的方法：

我們一般使用的是他的六個(gè)子類(lèi)：

ComposePathEffect

CornerPathEffect

DashPathEffect

DiscretePathEffect

PathDashPathEffect

SumPathEffect

下面我們依次對(duì)他們的作用，以及構(gòu)造方法進(jìn)行分析！

1.子類(lèi)作用與構(gòu)造方法參數(shù)分析：

1)CornerPathEffect

CornerPathEffect(float radius)

將Path的各個(gè)連接線(xiàn)段之間的夾角用一種更平滑的方式連接，類(lèi)似于圓弧與切線(xiàn)的效果。 radius則是指定圓弧的半徑！

2)DashPathEffect

DashPathEffect(float[] intervals, float phase)

將Path的線(xiàn)段虛線(xiàn)化，intervals為虛線(xiàn)的ON和OFF的數(shù)組，數(shù)組中元素?cái)?shù)目需要 >= 2；而phase則為繪制時(shí)的偏移量！

3)DiscretePathEffect

DiscretePathEffect(float segmentLength, float deviation)

打散Path的線(xiàn)段，使得在原來(lái)路徑的基礎(chǔ)上發(fā)生打散效果。 segmentLength指定最大的段長(zhǎng)，deviation則為繪制時(shí)的偏離量。

4)PathDashPathEffect

PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style)

作用是使用Path圖形來(lái)填充當(dāng)前的路徑，shape指的填充圖形，advance是每個(gè)圖形間的間隔， style則是該類(lèi)自由的枚舉值，有三種情況：ROTATE、MORPH和TRANSLATE。

ROTATE情況下：線(xiàn)段連接處的圖形轉(zhuǎn)換以旋轉(zhuǎn)到與下一段移動(dòng)方向相一致的角度進(jìn)行連接

MORPH情況下：圖形會(huì)以發(fā)生拉伸或壓縮等變形的情況與下一段相連接

TRANSLATE情況下：圖形會(huì)以位置平移的方式與下一段相連接

5)ComposePathEffect

ComposePathEffect(PathEffect outerpe, PathEffect innerpe)

作用是：組合效果，會(huì)首先將innerpe變現(xiàn)出來(lái)，接著在innerpe的基礎(chǔ)上來(lái)增加outerpe效果！

6)SumPathEffect

SumPathEffect(PathEffect first, PathEffect second)

作用是：疊加效果，和ComposePathEffect不同，在表現(xiàn)時(shí)會(huì)將兩個(gè)參數(shù)的效果都獨(dú)立的表現(xiàn)出來(lái)，接著將兩個(gè)效果簡(jiǎn)單的重疊在一起顯示出來(lái)！

2.寫(xiě)代碼來(lái)驗(yàn)證各自的效果

多說(shuō)無(wú)益，寫(xiě)代碼最實(shí)際，我們寫(xiě)下代碼來(lái)試試這幾個(gè)子類(lèi)各自所起的效果！

運(yùn)行效果圖：

實(shí)現(xiàn)代碼：

我們自己來(lái)寫(xiě)一個(gè)View，里面的線(xiàn)移動(dòng)的效果是phase增加造成的，每次 + 2，然后invalidate重繪而已，所以別驚訝！PathEffectView.java:

/**
 * Created by Jay on 2015/10/30 0030.
 */
public class PathEffectView extends View {

    private Paint mPaint;
    private Path mPath;
    private float phase = 0;
    private PathEffect[] effects = new PathEffect[7];
    private int[] colors;

    public PathEffectView(Context context) {
        this(context, null);
    }

    public PathEffectView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PathEffectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //初始化畫(huà)筆
    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //抗鋸齒
        mPaint.setStyle(Paint.Style.STROKE);       //繪畫(huà)風(fēng)格:空心
        mPaint.setStrokeWidth(5);                  //筆觸粗細(xì)
        mPath = new Path();
        mPath.moveTo(0, 0);
        for (int i = 1; i <= 15; i++) {
            // 生成15個(gè)點(diǎn)，隨機(jī)生成它們的坐標(biāo)，并將它們連成一條Path
            mPath.lineTo(i * 40, (float) Math.random() * 100);
        }
        // 初始化7個(gè)顏色
        colors = new int[] { Color.RED, Color.BLUE, Color.GREEN,
                Color.YELLOW, Color.BLACK, Color.MAGENTA, Color.CYAN };
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        //初始化其中路徑效果：
        effects[0] = null;                                    //無(wú)效果
        effects[1] = new CornerPathEffect(10);                //CornerPathEffect
        effects[2] = new DiscretePathEffect(3.0f, 5.0f);      //DiscretePathEffect
        effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase);   //DashPathEffect
        Path p = new Path();
        p.addRect(0, 0, 8, 8, Path.Direction.CCW);
        effects[4] = new PathDashPathEffect(p, 12, phase,
                PathDashPathEffect.Style.ROTATE);             //PathDashPathEffect
        effects[5] = new ComposePathEffect(effects[2], effects[4]);    //ComposePathEffect
        effects[6] = new SumPathEffect(effects[2], effects[4]);   //SumPathEffect
        // 將畫(huà)布移動(dòng)到(10,10)處開(kāi)始繪制
        canvas.translate(10, 10);
        // 依次使用7中不同的路徑效果、7中不同的顏色來(lái)繪制路徑
        for (int i = 0; i < effects.length; i++) {
            mPaint.setPathEffect(effects[i]);
            mPaint.setColor(colors[i]);
            canvas.drawPath(mPath, mPaint);
            canvas.translate(0, 60);
        }
        // 改變phase值，形成動(dòng)畫(huà)效果
        phase += 2;
        invalidate();
    }
}

好的，代碼的注釋已經(jīng)非常清楚了，這里也不嘮叨了~