Android Paint PathEffect 路径效果

Android Paint PathEffect ( 路径效果 ) 可以实现画虚线或者将路径的转角变得圆滑等效果

PathEffect 和 MaskFilter(面具) 与 ColorFilter(颜色滤镜) 一样,几乎没有可用的方法

但它定义了六个子类

CornerPathEffect 平滑夹脚效果

将 Path 的各个连接线段之间的夹角用一种更平滑的方式连接,类似于圆弧与切线的效果

CornerPathEffect(float radius)

参数说明

参数 说明
radius 则是指定圆弧的半径

DashPathEffect 虚线效果

将 Path 的线段虚线化

DashPathEffect(float[] intervals, float phase)

参数说明

参数 说明
intervals 为虚线的 ON 和 OFF 的数组,数组中元素数目需要 >= 2
phase 绘制时的偏移量

DiscretePathEffect 打散效果

打散 Path 的线段,使得在原来路径的基础上发生打散效果

DiscretePathEffect(float segmentLength, float deviation)

参数说明

参数 说明
segmentLength 指定最大的段长
deviation 绘制时的偏离量

PathDashPathEffect 路径填充

使用 Path 图形来填充当前的路径

PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style)

参数说明

参数 说明
shape 指的填充图形
advance 是每个图形间的间隔
style 样式,该类自由的枚举值,有三种情况:ROTATE 、 MORPH 和 TRANSLATE

style 值说明

说明
ROTATE 线段连接处的图形转换以旋转到与下一段移动方向相一致的角度进行连接
MORPH 图形会以发生拉伸或压缩等变形的情况与下一段相连接
TRANSLATE 图形会以位置平移的方式与下一段相连接

ComposePathEffect 组合效果

组合效果,会首先将 innerpe 变现出来,接着在 innerpe 的基础上来增加 outerpe 效果

ComposePathEffect(PathEffect outerpe, PathEffect innerpe)

SumPathEffect 叠加效果

叠加效果,和 ComposePathEffect 不同,在表现时会将两个参数的效果都独立的表现出来, 接着将两个效果简单的重叠在一起显示出来

SumPathEffect(PathEffect first, PathEffect second)

范例

我们一个 demo 来演示这几个子类各自所起的效果


  1. 创建一个 空的 Android 项目 cn.twle.android.PathEffect

  2. 自定义一个 View 类 MsView.java

    里面的线移动的效果是 phase 增加造成的,每次 + 2

    package cn.twle.android.patheffect;
    
    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.util.AttributeSet;
    import android.view.View;
    
    public class MsView extends View {
    
        private Paint mPaint;
        private Path mPath;
        private float phase = 0;
        private PathEffect[] effects = new PathEffect[7];
        private int[] colors;
    
        public MsView(Context context) {
            this(context, null);
        }
    
        public MsView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        public MsView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        //初始化画笔
        private void init() {
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //抗锯齿
            mPaint.setStyle(Paint.Style.STROKE);       //绘画风格:空心
            mPaint.setStrokeWidth(5);                  //笔触粗细
            mPath = new Path();
            mPath.moveTo(0, 0);
            for (int i = 1; i <= 15; i++) {
                // 生成15个点,随机生成它们的坐标,并将它们连成一条Path
                mPath.lineTo(i * 40, (float) Math.random() * 100);
            }
            // 初始化7个颜色
            colors = new int[] { Color.RED, Color.BLUE, Color.GREEN,
                    Color.YELLOW, Color.BLACK, Color.MAGENTA, Color.CYAN };
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);
            //初始化其中路径效果:
            effects[0] = null;                                    //无效果
            effects[1] = new CornerPathEffect(10);                //CornerPathEffect
            effects[2] = new DiscretePathEffect(3.0f, 5.0f);      //DiscretePathEffect
            effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase);   //DashPathEffect
            Path p = new Path();
            p.addRect(0, 0, 8, 8, Path.Direction.CCW);
            effects[4] = new PathDashPathEffect(p, 12, phase,
                    PathDashPathEffect.Style.ROTATE);             //PathDashPathEffect
            effects[5] = new ComposePathEffect(effects[2], effects[4]);    //ComposePathEffect
            effects[6] = new SumPathEffect(effects[2], effects[4]);   //SumPathEffect
            // 将画布移动到(10,10)处开始绘制
            canvas.translate(10, 10);
            // 依次使用7中不同的路径效果、7中不同的颜色来绘制路径
            for (int i = 0; i < effects.length; i++) {
                mPaint.setPathEffect(effects[i]);
                mPaint.setColor(colors[i]);
                canvas.drawPath(mPath, mPaint);
                canvas.translate(0, 60);
            }
            // 改变phase值,形成动画效果
            phase += 2;
            invalidate();
        }
    }
    
  3. 修改 MainActivity.java 设置 setContentView(new MsView(MainActivity.this))

    package cn.twle.android.patheffect;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(new MsView(MainActivity.this));
        }
    }
    

参考文档

  1. 官方 API 文档: PathEffect

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.