Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android開發之Path類使用詳解,自繪各種各樣的圖形!

Android開發之Path類使用詳解,自繪各種各樣的圖形!

編輯:關於Android編程

玩過自定義View的小伙伴都知道,在View的繪制過程中,有一個類叫做Path,Path可以幫助我們實現很多自定義形狀的View,特別是配合xfermode屬性來使用的時候。OK,那我們今天就來看看Path中那幾個常用的API。

1.moveTo

moveTo表示將繪制點移動到某一個坐標處,該方法並不會進行繪制,主要是用來移動畫筆。默認情況下起始坐標位於(0,0)點,我們可以手動調整默認位置。

2.lineTo

lineTo表示繪制一條直線,參數表示目標坐標如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        path.lineTo(getResources().getDimensionPixelSize(R.dimen.dot1x),
                getResources().getDimensionPixelSize(R.dimen.dot1x));
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

默認情況下,起始點為(0,0)點,如果我用moveTo將起始點坐標移至(0,150),代碼如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        path.moveTo(0,getResources().getDimensionPixelSize(R.dimen.dot1x));
        path.lineTo(getResources().getDimensionPixelSize(R.dimen.dot1x),
                getResources().getDimensionPixelSize(R.dimen.dot1x));
        canvas.drawPath(path, paint);
    }

\

 

3.quadTo

quadTo可以用來繪制一個帶控制點的曲線,說白了,其實就是貝塞爾曲線。如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        path.moveTo(0, 300);
        path.quadTo(150, 0, 300, 300);
        canvas.drawPath(path, paint);
    }

前兩個參數表示控制點的坐標,後兩個參數表示結束點的坐標:

 

\

4.cubicTo

cubicTo可以用來繪制具有兩個控制點的貝塞爾曲線,代碼如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        path.moveTo(300, 0);
        path.cubicTo(0, 150, 300, 450, 0, 600);
        canvas.drawPath(path, paint);
    }

前兩個參數表示第一個控制點的坐標,第三四個參數表示第二個控制點的坐標,第五六個參數表示最終的坐標點,顯示效果如下:

 

\

5.arcTo

artTo用來繪制一段圓弧,實際上是截取圓或者橢圓的一部分,比如下面一段代碼:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        RectF oval = new RectF(0, 0, 300, 300);
        path.arcTo(oval, 0, 90);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

該方法接收三個參數,第一個表示弧形所在的矩形,如果矩形為正方形,則畫出的弧形為圓的一部分,如果矩形寬高不等,畫出的弧形為橢圓的一部分,第二個參數表示繪制的起點位置,0度為鐘表三點位置,第三個參數表示繪制的度數。看下面一段代碼:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        RectF oval = new RectF(0, 0, 600, 300);
        path.arcTo(oval, 0, 90);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

如上則是橢圓的一部分。

arcTo方法還有一個重載的方法,即接收四個參數,最後一個參數表示是否將弧形的起點與上一個圖形的終點連接起來,true表示不連接,false表示連接,默認為false,如下一段代碼:

 

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path path = new Path();
        RectF oval = new RectF(0, 0, 600, 300);
        path.arcTo(oval, 0, 90);
        RectF oval2 = new RectF(0, 400, 300, 700);
        path.arcTo(oval2, 90, 180);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

如果我給第二條線再添加一個參數true,如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        path.lineTo(150, 150);
        RectF oval2 = new RectF(0, 200, 300, 500);
        path.arcTo(oval2, 0, 180, true);
        canvas.drawPath(path, paint);
    }

 

 

顯示效果如下:

 

\

這裡有個坑,一定要運行起來才有效果,編譯之後預覽看到的效果是錯的。囧了個囧。。。。。

6.addArc、addRoundRect、addOval、addRect、addCircle

addArc,添加一個圓弧到路徑中,這個圓弧實為圓或者橢圓的一部分,如下一段代碼:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        RectF oval = new RectF(0, 200, 300, 500);
        path.addArc(oval, 0, 180);
        canvas.drawPath(path, paint);
    }

效果如下:

 

\

後面幾種效果我一起來展示,代碼如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        RectF oval = new RectF(50, 50, 150, 150);
        path.addRoundRect(oval,25,25, Path.Direction.CCW);
        RectF oval2 = new RectF(50, 200, 250, 300);
        path.addOval(oval2, Path.Direction.CCW);
        RectF oval3 = new RectF(50, 350, 150, 450);
        path.addRect(oval3, Path.Direction.CCW);
        path.addCircle(100, 550, 50, Path.Direction.CCW);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

Direction參數表示方向,其中CW代表順時針,CCW代表逆時針。

7.Path.Op

Path中還有一個好用的Op屬性,這個屬性有點類似於Paint中的xfermode屬性,可以用來組合兩個Path。用法有如下幾種:

7.1Path.Op.DIFFERENCE

Path.Op.DIFFERENCE表示從path中去除path2的部分,保留path的部分。如下案例:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        Path path2 = new Path();
        path.addCircle(200, 200, 100, Path.Direction.CCW);
        path2.addRect(200, 200, 300, 300, Path.Direction.CCW);
        path.op(path2, Path.Op.DIFFERENCE);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

7.2Path.Op.INTERSECT

Path.Op.INTERSECT表示取path和path2相交的部分顯示出來,如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        Path path2 = new Path();
        path.addCircle(200, 200, 100, Path.Direction.CCW);
        path2.addRect(200, 200, 300, 300, Path.Direction.CCW);
        path.op(path2, Path.Op.INTERSECT);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

7.3Path.Op.REVERSE_DIFFERENCE

Path.Op.REVERSE_DIFFERENCE表示除去path的部分,只顯示path2的部分,如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        Path path2 = new Path();
        path.addCircle(200, 200, 100, Path.Direction.CCW);
        path2.addRect(200, 200, 300, 300, Path.Direction.CCW);
        path.op(path2, Path.Op.REVERSE_DIFFERENCE);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

7.4Path.Op.UNION

Path.Op.UNION表示path和path2的部分都要顯示出來,如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        Path path2 = new Path();
        path.addCircle(200, 200, 100, Path.Direction.CCW);
        path2.addRect(200, 200, 300, 300, Path.Direction.CCW);
        path.op(path2, Path.Op.UNION);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

7.5Path.Op.XOR

Path.Op.XOR表示顯示path和path2但是不包含二者的交集。如下:

 

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        Path path2 = new Path();
        path.addCircle(200, 200, 100, Path.Direction.CCW);
        path2.addRect(200, 200, 300, 300, Path.Direction.CCW);
        path.op(path2, Path.Op.XOR);
        canvas.drawPath(path, paint);
    }

顯示效果如下:

 

\

 

OK,以上就是對Path類的一個簡單介紹。

 

以上。

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved