Path 类 简介及使用示例

2019年5月31日 203次阅读 来源: 赵者也

Android 除了可以将 N 个点连成一条路径，还为路径绘制提供了 PathEffect 来定义绘制效果，PathEffect 包含了如下子类（每个子类代表一种绘制效果）：

  1. ComposePathEffect 可以用来组合两种路径效果，就是把两种效果二合一。它是先将路径变成innerpe的效果，再去复合outerpe的路径效果，即：outerpe(innerpe(Path))。
  2. CornerPathEffect 将路径的转角变得圆滑，CornerPathEffect的构造方法只接受一个参数radius，意思就是转角处的圆滑程度。
  3. DashPathEffect 它包含了两个参数：第一个参数是一个浮点型的数组，偶数参数定义了每一条实线的长度，而奇数参数则表示每一条虚线的长度；第二个参数（phase）我称之为偏移值，动态改变其值会让路径产生动画的效果。
  4. DiscretePathEffect （离散路径效果）相对来说则稍微复杂点，它会在路径上绘制很多“杂点”的突出来模拟一种类似生锈铁丝的效果。其构造方法有两个参数：第一个呢指定这些突出的“杂点”的密度，值越小杂点越密集；第二个参数呢则是“杂点”突出的大小，值越大突出的距离越大反之反之。
  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();
        }
    }

}

上面示例的运行效果图：

《Path 类 简介及使用示例》 显示效果

除此之外，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);
        }
    }

}

该示例的运行效果：

《Path 类 简介及使用示例》 显示效果

参考文献：《疯狂Android讲义（第2版）》
参考链接：详解Paint的setPathEffect(PathEffect effect)

    原文作者：赵者也
    原文地址: https://www.jianshu.com/p/a905cd3d6b99
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞