Android自定义控件入门到精通--PathEffect路径效果

最新推荐文章于 2022-01-08 00:00:29 发布
最新推荐文章于 2022-01-08 00:00:29 发布
阅读量413 收藏 2
点赞数 2
分类专栏： Android自定义控件入门到精通
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jhone_csdn/article/details/118109643
版权

《Android自定义控件入门到精通》文章索引 ☞ https://blog.csdn.net/Jhone_csdn/article/details/118146683

《Android自定义控件入门到精通》所有源码 ☞ https://gitee.com/zengjiangwen/Code

文章目录

PathEffect

路径效果，有六个实现类。

在这里插入图片描述

DashPathEffect

DashPathEffect(float intervals[], float phase) 虚线路径效果

  • intervals：描述虚线效果的数组，按这个数组描述循环绘制效果
  • phase：开始绘制的偏移量

示例：

@Override
protected void onDraw(Canvas canvas) {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(4);

    Path path = new Path();
    path.moveTo(50, 50);
    path.lineTo(500, 50);
    paint.setColor(Color.WHITE);
    canvas.drawPath(path, paint);

    canvas.translate(0, 50);
    float[] intervals = new float[]{10, 10};//画10、空10
    paint.setPathEffect(new DashPathEffect(intervals, 0));
    canvas.drawPath(path, paint);

    canvas.translate(0, 50);
    float[] intervals1 = new float[]{10, 30};//画10、空30
    paint.setPathEffect(new DashPathEffect(intervals1, 0));
    paint.setColor(Color.YELLOW);
    canvas.drawPath(path, paint);

    canvas.translate(0, 50);
    float[] intervals2 = new float[]{10, 20, 30, 20};//画10、空20、画30、空20
    paint.setPathEffect(new DashPathEffect(intervals2, 0));
    paint.setColor(Color.RED);
    canvas.drawPath(path, paint);

    canvas.translate(0, 50);
    float[] intervals3 = new float[]{10, 20, 30, 20};//画10、空20、画30、空20
    paint.setPathEffect(new DashPathEffect(intervals3, 30));//起点偏移30
    paint.setColor(Color.RED);
    canvas.drawPath(path, paint);
}

在这里插入图片描述
在这里插入图片描述

用这个phase偏移量还能实现虚线运动的效果

    private Paint mPaint;
    private Path mPath;

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);

        mPath = new Path();
        mPath.moveTo(20,120);
        mPath.cubicTo(60,20,180,220,240,120);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(mPath, mPaint);
    }

    //点击事件触发这个方法
    public void showAnimator() {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 45);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setDuration(2000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mPaint.setPathEffect(new DashPathEffect(new float[]{5, 10, 20, 10}, value));
                invalidate();
            }
        });
        animator.start();
    }

在这里插入图片描述

PathDashPathEffect

PathDashPathEffect(Path shape, float advance, float phase,Style style)，图章路径效果

  • shape：图章形状
  • advance：两个图案之间的距离
  • phase：起始偏移量，跟DashPathEffect中的phase一个意思
  • style：设置路径转角图案的处理方式

Style:

  • PathDashPathEffect.Style.TRANSLATE 平移改变位置处理转角
  • PathDashPathEffect.Style.ROTATE 旋转改变角度处理转角
  • PathDashPathEffect.Style.MORPH 变形改变形状处理转角

不知道大家对PS的图案图章工具有没有了解，给大家演示一下：

在这里插入图片描述

PathDashPathEffect路径效果也是差不多是这个样子的

@Override
protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);
    //创建图章形状
    Path shape = new Path();
    shape.moveTo(0, 15);
    shape.quadTo(0, 36, 25, 50);
    shape.quadTo(46, 36, 46, 15);
    shape.cubicTo(46, -2, 25, -2, 23, 12);
    shape.cubicTo(21, -2, 0, -2, 0, 15);

    //创建路径
    Path path = new Path();
    path.moveTo(20, 50);
    path.lineTo(400, 50);
    path.quadTo(300, 300, 200, 200);

    //设置图章效果样式为 Style.TRANSLATE
    mPaint.setPathEffect(new PathDashPathEffect(shape, 80, 0, PathDashPathEffect.Style.TRANSLATE));
    canvas.drawPath(path, mPaint);

    //设置图章效果样式为 Style.ROTATE
    mPaint.setPathEffect(new PathDashPathEffect(shape, 80, 0, PathDashPathEffect.Style.ROTATE));
    canvas.translate(0, 250);
    canvas.drawPath(path, mPaint);

    //设置图章效果样式为 Style.MORPH
    mPaint.setPathEffect(new PathDashPathEffect(shape, 80, 0, PathDashPathEffect.Style.MORPH));
    canvas.translate(0, 250);
    canvas.drawPath(path, mPaint);
}

在这里插入图片描述

CornerPathEffect

CornerPathEffect(float radius)，圆角路径效果

  • radius：圆角的半径
@Override
protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(2);
    Path path=new Path();
    path.lineTo(100,260);
    path.lineTo(125,60);
    path.lineTo(200,180);
    path.lineTo(250,90);
    path.lineTo(320,200);
    path.lineTo(400,20);
    path.lineTo(499,160);
    //设置圆角路径效果，圆角半径为10
    mPaint.setPathEffect(new CornerPathEffect(10));
    canvas.drawPath(path,mPaint);

    //设置圆角路径效果，圆角半径为50
    mPaint.setPathEffect(new CornerPathEffect(50));
    canvas.translate(0,300);
    canvas.drawPath(path,mPaint);
}

在这里插入图片描述

可以看出，半径越大，圆角越圆润

在这里插入图片描述

SumPathEffect

SumPathEffect(PathEffect first, PathEffect second)，几个效果叠加

@Override
protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(2);
    //创建一条路径
    Path path = new Path();
    path.lineTo(100, 260);
    path.lineTo(125, 60);
    path.lineTo(200, 180);
    path.lineTo(250, 90);
    path.lineTo(320, 200);
    path.lineTo(400, 20);
    path.lineTo(499, 160);

    //圆角路径效果
    CornerPathEffect cornerPathEffect = new CornerPathEffect(50);
    //虚线路径效果
    DashPathEffect dashPathEffect = new DashPathEffect(new float[]{10, 10}, 0);

    //堆叠效果，圆角效果在下，虚线效果在上
    mPaint.setPathEffect(new SumPathEffect(cornerPathEffect, dashPathEffect));
    canvas.drawPath(path, mPaint);

    //堆叠效果，虚线效果在下，圆角效果在上
    canvas.translate(0, 200);
    mPaint.setPathEffect(new SumPathEffect(dashPathEffect, cornerPathEffect));
    mPaint.setColor(Color.WHITE);
    canvas.drawPath(path, mPaint);
}

在这里插入图片描述

拿上面那条路径来说，也就是先画一条圆角路径效果，再画一条虚线路径效果，然后把两个效果堆叠在一起形成新的一种效果.。

ComposePathEffect

ComposePathEffect(PathEffect outerpe, PathEffect innerpe)，复合效果路径

@Override
protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(2);
    //创建一条路径
    Path path = new Path();
    path.lineTo(100, 260);
    path.lineTo(125, 60);
    path.lineTo(200, 180);
    path.lineTo(250, 90);
    path.lineTo(320, 200);
    path.lineTo(400, 20);
    path.lineTo(499, 160);

    //圆角路径效果
    CornerPathEffect cornerPathEffect = new CornerPathEffect(50);
    //虚线路径效果
    DashPathEffect dashPathEffect = new DashPathEffect(new float[]{10, 10}, 0);

    //复合效果，先应用虚线路径效果，再在虚线路径效果上应用圆角路径效果
    mPaint.setPathEffect(new ComposePathEffect(cornerPathEffect, dashPathEffect));
    canvas.drawPath(path, mPaint);

    //复合效果，先应用圆角路径效果，再在圆角路径效果上应用虚线路径效果
    canvas.translate(0, 200);
    mPaint.setPathEffect(new ComposePathEffect(dashPathEffect, cornerPathEffect));
    mPaint.setColor(Color.WHITE);
    canvas.drawPath(path, mPaint);
}

在这里插入图片描述

可以看到，跟堆叠效果不一样的是，应用Effect的顺序不一样，最终效果就不一样，这里一定要注意这个顺序了：outer(inner(path)），inner是优先执行的。大家可能会觉得疑问，为什么上面红色路径只有虚线效果，没有圆角效果，这个没有为什么哈，虚线变不圆而已（强行解释）

DiscretePathEffect

DiscretePathEffect(float segmentLength, float deviation)，离散路径效果

  • segmentLength ：可以理解为离散频率
  • deviation：可以理解为做离散运动的距离，偏移量

例如DiscretePathEffect(2，10)，可以理解为：每2个像素长度为单位做离散运动，可运动的最大距离为10

在这里插入图片描述

@Override
protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(2);
    //创建一条路径
    Path path=new Path();
    path.lineTo(100,260);
    path.lineTo(125,60);
    path.lineTo(200,180);
    path.lineTo(250,90);
    path.lineTo(320,200);
    path.lineTo(400,20);
    path.lineTo(499,160);

    mPaint.setPathEffect(new DiscretePathEffect(1,0));
    canvas.drawPath(path,mPaint);

    canvas.translate(0,200);
    mPaint.setPathEffect(null);//清除画笔的路径效果

    mPaint.setColor(Color.RED);
    canvas.drawPath(path,mPaint);
    mPaint.setPathEffect(new DiscretePathEffect(1,10));
    mPaint.setColor(Color.WHITE);
    canvas.drawPath(path,mPaint);

    canvas.translate(0,200);
    mPaint.setPathEffect(null);//清除画笔的路径效果
    mPaint.setColor(Color.RED);
    canvas.drawPath(path,mPaint);
    mPaint.setPathEffect(new DiscretePathEffect(10,20));
    mPaint.setColor(Color.WHITE);
    canvas.drawPath(path,mPaint);
}

在这里插入图片描述

可以看到DiscretePathEffect(1，0)的效果，跟本身直线路径没区别，因为按照上面定义的理解，每个像素都做离散运动，运动距离为0，不就等于这个点没有运动吗，所以还是直线。

我们可以通过Paint.setPathEffect(null)来清除画笔的路径效果

一鱼浅游
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android 关于PathEffect的使用方法CornerPathEffect
nwpuxhld
05-25 3063
PathEffect在Java中是一个父类，他并没有什么用，关键是他的子类，挺有用的，就是感觉drawPath的时候的效果 他有以下子类
Android DashPathEffect的简单使用（如实线虚线）
我的博客
04-17 1万+
首先看一个自定义view实现的实线效果图， 实现很简单，就是用paint与path结合使用就可以做到了，由于代码过于简单，直接贴源码 布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
Android——详解Paint的setPathEffect(PathEffect effect)
小欣儿的专栏
11-19 1544
一、setPathEffect() 这个方法一看就和path有关，顾名思义，它就是给path设置样式（效果）的。PathEffect这个路径效果类没有具体的实现，效果是由它的六个子类实现的： 这六个子类分别可以实现不同的路径效果： 下面，我们来用代码来具体实现一下。 二、测试代码 2.1 代码框架 首先初始化paint和path，然后配置相关属性，最后作画。 package com.kale.c...
Android仿华为系统升级进度条的实现
吐尔洪江
01-08 1874
Android仿华为系统升级进度条的实现 实现如此简单
android记录画笔路径,Android Paint之PathEffect(路径效果)
weixin_32498069的博客
05-31 360
导航本节引言：本节继续来学习Paint的API——PathEffect(路径效果)，我们把画笔的sytle设置为Stroke，可以 绘制一个个由线构成的图形，而这些线偶尔会显得单调是吧，比如你想把这些先改成虚线，又 或者想让路径的转角变得圆滑等，那你就可以考虑使用这个PathEffect来实现了！PathEffect和我们前面学的MaskFilter(面具)与ColorFilter(颜色 过滤器)...
《Android自定义控件入门到实战》源码2018.10
11-23
《Android自定义控件入门到实战》是一本深入讲解Android平台下自定义控件开发的教程，源码2018.10版提供了一套完整的实践案例，帮助开发者从基础到进阶全面掌握自定义控件的制作技巧。这份资料涵盖了从基本的自定义...
Android应用源码之自定义控件入门级demo-IT计算机-毕业设计.zip
04-06
自定义控件往往涉及到动画效果，Android提供了属性动画API，使得我们可以轻松地为控件添加动态效果。同时，自定义控件可能需要维护多个状态（如选中、禁用等），通过重写`android:state_listDrawable`或使用`...
Android自定义控件eBook实现翻书效果实例详解
01-04
本文实例讲述了Android自定义控件eBook实现翻书效果的方法。分享给大家供大家参考，具体如下： 效果图： Book.java文件： package com.book; import android.app.Activity; import android.os.Bundle; import ...
Paint中PathDashPathEffect的简单使用
我本无名的专栏
10-14 1888
今天来了解一下PathDashPathEffect的简单使用，PathDashPathEffect与DashPathEffect的功能很像，不一样的就是它中间的实线部分，可以是我自定义的图形。看一下，方法 public PathDashPathEffect(Path shape, float advance, float phase, S...
Android自定义View（三）路径效果PathEffect
menglong0329的博客
05-13 354
1.七种路径效果 1.1 效果图 1.2 具体方法 PathEffect(); 默认效果，就是直线 CornerPathEffect(radius); 将各线段之间的夹角变成圆角，radius是圆角的半径 new DashPathEffect(new float[]{10f, 5f, 20f, 15f},10);绘制虚线，intervals最少为2个，ph...
AndroidUI之PathMeasure,PathEffect
做一个苦行僧的专栏
05-12 318
PathMeasure顾名思义，它是一个path(路径)的测量工具。我们可用通过它的一些API得到当前路径上某个点的坐标，还有夹角等信息，这些信息在自定义控件中都很适用。PathMeasure都会和一个或者多个Path结合使用。先看常用的API。 构造方法 //构造方法1 public PathMeasure() { mPath = null; ...
Android自定义view之PathEffect实践
和小胖
04-04 431
       今天我们来看看paint里面的PathEffect，还是先来看看PathEffect是什么：“PathEffect is the base class for objects in the Paint that affect the geometry of a drawing primitive before it is transformed by the canvas' matr...
DashPathEffect 画虚线无效
按时吃饭
04-25 3083
自定义控件是，给paint设置DashPathEffect，然而无效。后面发现是硬件加速的锅。记录下。 解决方法就是，在view层关闭硬件加速，直接在自定义View的构造方法中调用： setLayerType(View.LAYER_TYPE_SOFTWARE, null);即可。
Android 自定义控件学习-PathEffect
Chailyn的博客
11-06 912
PathEffect 路径效果学习 目录：简要介绍 原生效果 CornerPathEffect DiscretePathEffect DashPathEffect PathDashPathEffect ComposePathEffect和SumPathEffect简要介绍pathEffect见字知意，讲的是有关路径效果的，它有六个子类，分别拥有不同的效果。下面来看一下6个效果。 原生效果不加任何
Android中Path类的lineTo方法和quadTo方法画线的区别
热门推荐
stevenhu_223的专栏
07-02 7万+
但我们需要在屏幕上形成画线时，Path类的应用是必不可少的，而Path类的lineTo和quadTo方法实现的绘制线路形式是不一样的；    1. Path--->quadTo(float x, float y) :       该方法实现的是当我们不仅仅是画一条线而且是画弧线时会形成平滑的曲线，该曲线又称为"贝塞尔曲线"(Bezier curve)，下面以一个Demo来结合理解quad
Adroid学习研究(一) PathEffect 详细解析
驴与鱼的博客
03-16 462
PathEffect是绘制path路径增加特殊效果的类,它的子类有ComposePathEffect, CornerPathEffect, DashPathEffect, DiscretePathEffect, PathDashPathEffect, SumPathEffect; CornerPathEffect(float radius):它将Path的各个连接线段之间的夹角用一种更平滑的方式连
Path路径的特效
02-24 841
http://my.eoe.cn/37547/archive/3712.html android 针对path对象提供了一系列的PathEffect类来实现path绘制的特效。想实现path的特殊绘制效果，需要创建一个响应的PathEffect类，然后调用Paint的setPathEffect方法，将PathEffect类的对象作为参数传入，这样在绘制path时就可以根据PathEffe
初学Android,图形图像之使用Path类(二十六)
lee576的专栏
08-14 2万+
Path类可以预先在View上将N个点连成一条"路径",然后调用Canvas的drawPath(path,paint)即可沿着路径绘制图形Android还为路径绘制提供了PathEffect来定义绘制效果,PathEffect包含如下子类ComposePathEffectCornerPathEffectDashPathEffectDiscretePathEffectPathDashPathEffe
PathEffect 路径特效
u010152805的专栏
07-10 1477
路径的特效    android 针对path对象提供了一系列的PathEffect类来实现path绘制的特效。想实现path的特殊绘制效果，需要创建一个响应的PathEffect类，然后调用Paint的setPathEffect方法，将PathEffect类的对象作为参数传入，这样在绘制path时就可以根据PathEffect产生响应的效果了。下面详细介绍下相关的PathEffect类。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一鱼浅游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值