Path 类 简介及使用示例

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();
        }
    }

}

上面示例的运行效果图：

显示效果

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,560评论 25赞 709
  • GitHub上受欢迎的Android UI Library
    内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 47,052评论 22赞 665
  • 每首歌都是一个故事
    我喜欢的歌词。 狼爱上羊，爱的疯狂，谁让他们真爱了一场。老狼 我在遥望，月亮之上，有多少梦想在自由的飞翔。凤凰传奇...
    Nait99阅读 3,945评论 1赞 1
  • 读书笔记系列（三）
    下面这篇文章来为大家介绍《精进》这本书的关于“选择”的部分。 我们的一生都是在不断选择中度过的，某种程度上说，所谓...
    栉风沐雨1阅读 2,498评论 0赞 1
  • 说话的艺术3
    1、如果皮囊难以修复，我愿意用思想填满它 2.①我是胡歌 全盘规划好自好的人生是为了在将来成为一名真正的一家之主 ...
    我爱成均馆阅读 1,756评论 0赞 0

友情链接更多精彩内容