Android自定義View之圖形圖像工具類Path的特殊用法

概述：

沒什麼好說的。

Demo

新建一個自定義View

public class MyPathView extends View {
    private int width;
    private int height;
    private Paint mPaint;
    private Path mPath;
    private Paint mPaintPoint;
    private Paint mPaintText;

    private boolean isAdd = true;

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

    public MyPathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(50);
        mPaint.setAntiAlias(true);

        mPaintPoint = new Paint();
        mPaintPoint.setAntiAlias(true);
        mPaintPoint.setColor(Color.RED);
        mPaintPoint.setStyle(Paint.Style.STROKE);
        //mPaintPoint.setStrokeWidth(10);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(20);

        mPath = new Path();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
        setMeasuredDimension(width,height);


    }

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

        //畫一個三角形
        mPath.moveTo(100, 100);//起始位置
        mPath.lineTo(0, 200);//從起始位置移動到此位置
        mPath.lineTo(200, 200);//從上一位置移動到下一位置
        mPath.close();//前面只畫了兩條邊，調用close()可以讓三角形自動閉合
        canvas.drawPath(mPath, mPaint);//把path經歷的軌跡畫出來
    }
}

畫一個圓，沿著圓寫一段文字，修改onDraw()方法：

/*畫一個圓，並沿著圓寫一段文字*/
        //參數依次為：圓心x坐標，圓心y坐標,圓的半徑，CW順時針（CCW逆時針）方向
        mPath.addCircle(width / 2, height / 2, 300, Path.Direction.CW);
        canvas.drawPath(mPath, mPaint);
        //沿著path的軌跡寫一段文字
        canvas.drawTextOnPath(我要沿著圓形寫文字, mPath, 0, 0, mPaint);
        canvas.drawPath(mPath, mPaint);

演示結果：

貝塞爾曲線：<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjxiciAvPg0KsbTI+7b7x/rP39Kyv8nS1L3Q1/axtLzDsKPH+s/fu/LV37G018jH+s/fo6zL/NPJz9+2ztPrvdq149fps8mjrL3atePKx7/Jzc+2r7XE1qe146Osz9+2zs/xv8nJ7Mv1tcTGpL3uoaPSu7DjtcTKuMG/zbzQzsjtvP6zo8D708OxtMj7tvvH+s/fwLS+q8i3u62z9sf6z9+hozxiciAvPg0KQW5kcm9pZMzhuam1xLG0yPu2+8f6z9+75tbGvdO/2jwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> 在Android開發中，要實現貝塞爾曲線其實還是很簡單的，因為Android已經給我們提供了相關接口，但此接口方法，藏於Path類中（android.graphics.Path）。此方法如下： quadTo(float x1, float y1, float x2, float y2) Since: API Level 1 參數說明： x1：操作點的x坐標 y1：操作點的y坐標 x2：結束點的x坐標 y2：結束點的y坐標

mPath.moveTo(100, 100);
        //畫一條貝塞爾曲線，參數依次為：控制點的x坐標，控制點的y坐標，結束點的x坐標，結束點的y坐標
        mPath.quadTo(100, 400, 300, 300);
        canvas.drawPath(mPath, mPaint);
        canvas.drawPoint(100, 100, mPaintPoint);
        canvas.drawPoint(100, 400, mPaintPoint);
        canvas.drawPoint(300, 300, mPaintPoint);
        //會出以上貝塞爾曲線的起始點、控制點、結束點
        canvas.drawText(起始點, 100, 100, mPaintText);
        canvas.drawText(控制點, 100, 400, mPaintText);
        canvas.drawText(結束點, 300, 300, mPaintText);

public class MyPathView extends View {
    private int width;
    private int height;
    private Paint mPaint;
    private Path mPath;
    private Paint mPaintPoint;
    private Paint mPaintText;

    private int size = 0;
    private int count;
    private boolean isAdd = true;
    private static final int START_WAVE = 0x21;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case START_WAVE:
                    count+=5;
                    if(count>=80){
                        count=0;
                    }
                    if (isAdd){
                        size++;
                        if(size>10){
                            isAdd = false;
                        }
                    }else{
                        size--;
                        if(size<=-10){
                            isAdd =true;
                        }
                    }
                    invalidate();
                    sendEmptyMessageDelayed(START_WAVE,100);
                    break;
            }
        }
    };
    public MyPathView(Context context) {
        super(context);
    }

    public MyPathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setTextSize(50);
        mPaint.setAntiAlias(true);

        mPaintPoint = new Paint();
        mPaintPoint.setAntiAlias(true);
        mPaintPoint.setColor(Color.RED);
        mPaintPoint.setStyle(Paint.Style.STROKE);
        //mPaintPoint.setStrokeWidth(10);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(20);

        mPath = new Path();
        handler.sendEmptyMessageDelayed(START_WAVE,1000);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
        setMeasuredDimension(width,height);


    }

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

        /*
        畫一條個模擬流動的波浪
         */
        mPath.reset();
        //當count增大時，重繪會顯示向前流動效果
        mPath.moveTo(count, 200);
        //size的從大到小從小到大變化，重繪時會產生波浪起伏效果
        for(int i=0;i<10;i++) {
            /*
            rQuadTo()方法每次都會自動移動到下一位置，參數依次為水平幅度，
            垂直幅度，水平位移，處置位移
            */
            mPath.rQuadTo(20, size, 40, 0);
            mPath.rQuadTo(20, -size, 40, 0);
        }
        canvas.drawPath(mPath,mPaintPoint);
        canvas.drawCircle(width / 2, 200, 100, mPaint);

    }
}