Path 類 簡介及使用示例

Android 除了可以將 N 個點連成一條路徑,還為路徑繪制提供了 PathEffect 來定義繪制效果,PathEffect 包含了如下子類(每個子類代表一種繪制效果):

  1. ComposePathEffect 可以用來組合兩種路徑效果,就是把兩種效果二合一。它是先將路徑變成innerpe的效果,再去復(fù)合outerpe的路徑效果,即:outerpe(innerpe(Path))。
  2. CornerPathEffect 將路徑的轉(zhuǎn)角變得圓滑,CornerPathEffect的構(gòu)造方法只接受一個參數(shù)radius,意思就是轉(zhuǎn)角處的圓滑程度。
  3. DashPathEffect 它包含了兩個參數(shù):第一個參數(shù)是一個浮點型的數(shù)組,偶數(shù)參數(shù)定義了每一條實線的長度,而奇數(shù)參數(shù)則表示每一條虛線的長度;第二個參數(shù)(phase)我稱之為偏移值,動態(tài)改變其值會讓路徑產(chǎn)生動畫的效果。
  4. DiscretePathEffect (離散路徑效果)相對來說則稍微復(fù)雜點,它會在路徑上繪制很多“雜點”的突出來模擬一種類似生銹鐵絲的效果。其構(gòu)造方法有兩個參數(shù):第一個呢指定這些突出的“雜點”的密度,值越小雜點越密集;第二個參數(shù)呢則是“雜點”突出的大小,值越大突出的距離越大反之反之。
  5. PathDashPathEffect 它和DashPathEffect是類似的,不同的是PathDashPathEffect可以讓我們自己定義路徑虛線的樣式
  6. SumPathEffect 可以用來組合兩種路徑效果,就是把兩種效果二合一。它是把兩種路徑效果加起來再作用于路徑。

下面使用一個簡單示例來演示上面 6 種效果。

下面是主程序的代碼:

package com.toby.personal.testlistview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposePathEffect;
import android.graphics.CornerPathEffect;
import android.graphics.DashPathEffect;
import android.graphics.DiscretePathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.PathEffect;
import android.graphics.SumPathEffect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    final private static String TAG = "Toby_Test";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new TestView(this));
    }

    class TestView extends View {

        private float phase;
        private PathEffect[] effects;
        private int[] colors;
        private Paint paint;
        private Path path;
        private Path path1;

        public TestView(Context context) {
            super(context);
            paint = new Paint();
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(4);

            path = new Path();
            path.moveTo(0, 0);
            for (int i = 1; i <= 15; i++) {
                path.lineTo(i * 20, (float) Math.random() * 60);
            }

            path1 = new Path();
            path1.addRect(0, 0, 8, 8, Path.Direction.CCW);

            colors = new int[]{Color.BLACK, Color.BLUE, Color.CYAN, Color.GREEN,
                    Color.MAGENTA, Color.RED, Color.YELLOW};

            effects = new PathEffect[7];

        }

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

            effects[0] = null;
            effects[1] = new CornerPathEffect(10);
            effects[2] = new DiscretePathEffect(3.0f, 5.0f);
            effects[3] = new DashPathEffect(new float[]{20, 10, 5, 10}, phase);
            effects[4] = new PathDashPathEffect(path1, 12, phase, PathDashPathEffect.Style.ROTATE);
            effects[5] = new ComposePathEffect(effects[2], effects[4]);
            effects[6] = new SumPathEffect(effects[4], effects[3]);

            canvas.translate(8, 8);
            for (int i = 0; i < effects.length; i++) {
                paint.setPathEffect(effects[i]);
                paint.setColor(colors[i]);
                canvas.drawPath(path, paint);
                canvas.translate(0, 60);
            }

            phase += 1; // 改變 phase 的值形成動畫效果
            invalidate();
        }
    }

}

上面示例的運行效果圖:

顯示效果

除此之外,Android 的 Canvas 還提供了一個 drawTextOnPath 方法,該方法可以沿著 Path 繪制文本。下面是該方法的簡單示例:

package com.toby.personal.testlistview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposePathEffect;
import android.graphics.CornerPathEffect;
import android.graphics.DashPathEffect;
import android.graphics.DiscretePathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.PathEffect;
import android.graphics.RectF;
import android.graphics.SumPathEffect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    final private static String TAG = "Toby_Test";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new TestTextView(this));
    }

    class TestTextView extends View {

        final private static String DRAW_TEXT = "This is a test text.";
        Path[] paths = new Path[3];
        Paint paint;

        public TestTextView(Context context) {
            super(context);

            paths[0] = new Path();
            paths[0].moveTo(0, 0);
            for (int i = 0; i <= 7; ++i) {
                paths[0].lineTo(i * 30, (float) Math.random() * 30);
            }

            paths[1] = new Path();
            RectF rectF = new RectF(0, 0, 200, 120);
            paths[1].addOval(rectF, Path.Direction.CCW);

            paths[2] = new Path();
            paths[2].addArc(rectF, 60, 180);

            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(Color.CYAN);
            paint.setStrokeWidth(1);
        }

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

            canvas.drawColor(Color.GRAY);

            canvas.translate(40, 40);
            paint.setTextAlign(Paint.Align.RIGHT);
            paint.setTextSize(30);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(paths[0], paint);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawTextOnPath(DRAW_TEXT, paths[0], -8, 20, paint);

            canvas.translate(0, 60);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(paths[1], paint);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawTextOnPath(DRAW_TEXT, paths[1], -20, 20, paint);

            canvas.translate(0, 120);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(paths[2], paint);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawTextOnPath(DRAW_TEXT, paths[2], -10, 20, paint);
        }
    }

}

該示例的運行效果:


顯示效果

參考文獻:《瘋狂Android講義(第2版)》
參考鏈接:詳解Paint的setPathEffect(PathEffect effect)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 47,133評論 22 665
  • 我喜歡的歌詞。 狼愛上羊,愛的瘋狂,誰讓他們真愛了一場。老狼 我在遙望,月亮之上,有多少夢想在自由的飛翔。鳳凰傳奇...
    Nait99閱讀 733評論 1 1
  • 下面這篇文章來為大家介紹《精進》這本書的關(guān)于“選擇”的部分。 我們的一生都是在不斷選擇中度過的,某種程度上說,所謂...
    櫛風沐雨1閱讀 337評論 0 1
  • 1、如果皮囊難以修復(fù),我愿意用思想填滿它 2.①我是胡歌 全盤規(guī)劃好自好的人生是為了在將來成為一名真正的一家之主 ...
    我愛成均館閱讀 275評論 0 0

友情鏈接更多精彩內(nèi)容