android自定义控件-Path的进阶使用方法

最新推荐文章于 2022-04-03 15:32:11 发布
最新推荐文章于 2022-04-03 15:32:11 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： android 文章标签： 自定义控件 android path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ymeddmn/article/details/117621533
版权

代码 github 地址

点开代码能更好理解文章中的内容呦

https://github.com/ananananzhuo-blog/CustomViewDemo.git

Path 中的方法

1、重置 path 方法

 public void reset()

2、将画笔移动到指定位置（起始位置）

这个方法的 x，y 坐标是绝对坐标

public void moveTo(float x, float y)

3、将画笔移动到指定位置（起始位置）

和 2 中不同，这个方法中的 x，y 坐标是相对坐标

public void rMoveTo(float dx, float dy)

4、与 2 相对应，移动 path

绝对坐标

 public void lineTo(float x, float y)

5、与 3 相对应，移动 path

相对坐标

 public void rLineTo(float dx, float dy)

6、二阶贝塞尔曲线

绝对坐标

x1，y1：贝塞尔曲线的控制点

x2，y2：贝塞尔曲线的终点坐标

public void quadTo(float x1, float y1, float x2, float y2)

7、二阶贝塞尔曲线

相对坐标

 public void rQuadTo(float dx1, float dy1, float dx2, float dy2)

8、三阶贝塞尔曲线

绝对坐标

x1、y1：三阶贝塞尔曲线第一控制点

x2、y2：三阶贝塞尔曲线第二个控制点

x3、y3：三阶贝塞尔曲线的终点

 public void cubicTo(float x1, float y1, float x2, float y2,
                        float x3, float y3)

9、三阶贝塞尔曲线

相对坐标

 public void rCubicTo(float x1, float y1, float x2, float y2,
                         float x3, float y3)

10、画弧线

 public void arcTo(RectF oval, float startAngle, float sweepAngle,
                      boolean forceMoveTo)

代码示例

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.apply {
            path.reset()
            paint.color=Color.YELLOW
            canvas.drawCircle(250f,250f,150f,paint)
            paint.color=Color.RED
            val ovalRectf = RectF(100f, 100f, 400f, 400f)
            path.arcTo(ovalRectf, 0f, 120f)
            path.close()
            drawPath(path, paint)
        }
    }

实现效果： 红色部分的弧形就是我们要实现的效果，黄色部分是我们的弧形对应的整圆只起到一个参考的作用

11、将 path 进行偏移

偏移结果写到 dst 中

 public void offset(float dx, float dy, @Nullable Path dst)

public void offset(float dx, float dy)

12、结束 path，将起点终点相连

public void close()

两个 path 之间的算法（Path.Op）

//这个方法是Path的成员方法
public boolean op(Path path, Op op)

下面表格是对 op 属性的说明

欢迎关注V ”安安安安卓“ 学习更多知识

--

代码 github 地址

https://github.com/ananananzhuo-blog/CustomViewDemo.git

Path 中的方法

1、重置 path 方法

 public void reset()

2、将画笔移动到指定位置（起始位置）

这个方法的 x，y 坐标是绝对坐标

public void moveTo(float x, float y)

3、将画笔移动到指定位置（起始位置）

和 2 中不同，这个方法中的 x，y 坐标是相对坐标

public void rMoveTo(float dx, float dy)

4、与 2 相对应，移动 path

绝对坐标

 public void lineTo(float x, float y)

5、与 3 相对应，移动 path

相对坐标

 public void rLineTo(float dx, float dy)

6、二阶贝塞尔曲线

绝对坐标

x1，y1：贝塞尔曲线的控制点

x2，y2：贝塞尔曲线的终点坐标

public void quadTo(float x1, float y1, float x2, float y2)

二阶贝塞尔曲线动态动画呈现

图中的黄色点就是二阶贝塞尔曲线的控制点，这个控制点跟随手指移动然后动态刷新二阶贝塞尔曲线的形态

 

7、二阶贝塞尔曲线

相对坐标

 public void rQuadTo(float dx1, float dy1, float dx2, float dy2)

8、三阶贝塞尔曲线

绝对坐标

x1、y1：三阶贝塞尔曲线第一控制点

x2、y2：三阶贝塞尔曲线第二个控制点

x3、y3：三阶贝塞尔曲线的终点

 public void cubicTo(float x1, float y1, float x2, float y2,
                        float x3, float y3)

三阶贝塞尔曲线动态动画呈现

 

两个蓝色的点分别是三阶贝塞尔曲线的两个控制点，我们移动控制点的时候三阶贝塞尔曲线会动态改变形态

 

9、三阶贝塞尔曲线

相对坐标

 public void rCubicTo(float x1, float y1, float x2, float y2,
                         float x3, float y3)

10、画弧线

 public void arcTo(RectF oval, float startAngle, float sweepAngle,
                      boolean forceMoveTo)

代码示例

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.apply {
            path.reset()
            paint.color=Color.YELLOW
            canvas.drawCircle(250f,250f,150f,paint)
            paint.color=Color.RED
            val ovalRectf = RectF(100f, 100f, 400f, 400f)
            path.arcTo(ovalRectf, 0f, 120f)
            path.close()
            drawPath(path, paint)
        }
    }

实现效果： 红色部分的弧形就是我们要实现的效果，黄色部分是我们的弧形对应的整圆只起到一个参考的作用

11、将 path 进行偏移

偏移结果写到 dst 中

 public void offset(float dx, float dy, @Nullable Path dst)

public void offset(float dx, float dy)

12、结束 path，将起点终点相连

public void close()

两个 path 之间的算法（Path.Op）

//这个方法是Path的成员方法
public boolean op(Path path, Op op)

下面表格是对 op 属性的说明

字段功能
DIFFERENCEpath1 减去 path2 的区域
INTERSECT留下 path2 和 path2 相交的区域
UNIONpath1 和 path2 的并集
XOR包含 path1 和 path2 但不包含相交的部分
REVERSE_DIFFERENCEpath2 减去 path1 的区域

代码示例（分支名：path）

//代码所属类：PathOpView 所属分支path
override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        path2.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, radius1, Direction.CW)
            path2.addCircle(400f, 400f, radius2, Direction.CW)
            path1.op(path2, ops)
            path1.close()
            path2.close()
            canvas.drawPath(path1, paint1)
//          canvas.drawPath(path2, paint2)//这里一定不要再绘制path2了，因为path1.op(path2, ops)的存在，path2默认就会被绘制
        }
    }

本示例中可以通过拖动 Seekbar 改变两个圆的大小，通过点击按钮的弹窗列表框选择不同的 Path.Ops 属性查看效果

效果图：

Path.Direction 方向

Path 的多个绘制方法有 Path.Direction 形参的

1、 PathDirectionCCW 逆时针

示例代码

 path1.addRect(rect,Path.Direction.CCW)

2、 PathDirectionCW 顺时针

示例代码

 path1.addRect(rect,Path.Direction.CW)

Path 填充-FillType

Path 填充

FillType 是个枚举，里面有四种类型

 public enum FillType {

        WINDING         (0),

        EVEN_ODD        (1),

        INVERSE_WINDING (2),

        INVERSE_EVEN_ODD(3);

    }

1、WINDING

判断 path 区域是否需要被填充的方式：从该区域向外画一条射线，因为 Path 是有方向的（顺时针和逆时针 Path.Direction）。我们假设顺时针为正，逆时针为负，如果最终得到的值的绝对值大于 0 该区域就是内部区域应该被填充，如果==0 该区域为外部区域不可以被填充。所以当与射线相交的边框方向相反（一个顺时针一个逆时针）的时候就是正负得 0，该区域是外部区域不可以被填充

方向相同

代码：

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)

            path1.fillType = Path.FillType.WINDING
            drawPath(path1, paint)
        }
    }

代码实现效果

方向相反

代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CCW)

            path1.fillType = Path.FillType.WINDING
            drawPath(path1, paint)
        }
    }

代码实现效果

2、INVERSE_WINDING

方向相同

代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)
            path1.fillType = Path.FillType.INVERSE_WINDING
            drawPath(path1, paint)
        }
    }

代码实现效果展示

方向相反

代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CCW)
            path1.fillType = Path.FillType.INVERSE_WINDING
            drawPath(path1, paint)
        }
    }

代码效果展示

3、EVEN_ODD

与 WINDING 相同，EVEN_ODD 也是使用画射线的方式确定是否为内部可填充区域。如果射线与 path 相交的交点数为偶数则属于外部区域，不需要被填充。如果是奇数则是内部区域，需要被填充。 效果图展示：

代码展示：

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)

            path1.fillType = Path.FillType.EVEN_ODD
            drawPath(path1, paint)
        }
    }

代码效果展示

4、INVERSE_EVEN_ODD

该放手与 EVEN_ODD 被填充的区域刚好相反 代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)

            path1.fillType = Path.FillType.INVERSE_EVEN_ODD
            drawPath(path1, paint)
        }
    }

代码效果展示

完

 
  
  
  
  
  

代码示例（分支名：path）

//代码所属类：PathOpView 所属分支path
override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        path2.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, radius1, Direction.CW)
            path2.addCircle(400f, 400f, radius2, Direction.CW)
            path1.op(path2, ops)
            path1.close()
            path2.close()
            canvas.drawPath(path1, paint1)
//          canvas.drawPath(path2, paint2)//这里一定不要再绘制path2了，因为path1.op(path2, ops)的存在，path2默认就会被绘制
        }
    }

本示例中可以通过拖动 Seekbar 改变两个圆的大小，通过点击按钮的弹窗列表框选择不同的 Path.Ops 属性查看效果

效果图：

Path.Direction 方向

Path 的多个绘制方法有 Path.Direction 形参的

1、 PathDirectionCCW 逆时针

示例代码

 path1.addRect(rect,Path.Direction.CCW)

2、 PathDirectionCW 顺时针

示例代码

 path1.addRect(rect,Path.Direction.CW)

Path 填充-FillType

Path 填充

FillType 是个枚举，里面有四种类型

 public enum FillType {

        WINDING         (0),

        EVEN_ODD        (1),

        INVERSE_WINDING (2),

        INVERSE_EVEN_ODD(3);

    }

1、WINDING

判断 path 区域是否需要被填充的方式：从该区域向外画一条射线，因为 Path 是有方向的（顺时针和逆时针 Path.Direction）。我们假设顺时针为正，逆时针为负，如果最终得到的值的绝对值大于 0 该区域就是内部区域应该被填充，如果==0 该区域为外部区域不可以被填充。所以当与射线相交的边框方向相反（一个顺时针一个逆时针）的时候就是正负得 0，该区域是外部区域不可以被填充

方向相同

代码：

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)

            path1.fillType = Path.FillType.WINDING
            drawPath(path1, paint)
        }
    }

代码实现效果

方向相反

代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CCW)

            path1.fillType = Path.FillType.WINDING
            drawPath(path1, paint)
        }
    }

代码实现效果

2、INVERSE_WINDING

方向相同

代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)
            path1.fillType = Path.FillType.INVERSE_WINDING
            drawPath(path1, paint)
        }
    }

代码实现效果展示

方向相反

代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CCW)
            path1.fillType = Path.FillType.INVERSE_WINDING
            drawPath(path1, paint)
        }
    }

代码效果展示

3、EVEN_ODD

与 WINDING 相同，EVEN_ODD 也是使用画射线的方式确定是否为内部可填充区域。如果射线与 path 相交的交点数为偶数则属于外部区域，不需要被填充。如果是奇数则是内部区域，需要被填充。 效果图展示：

代码展示：

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)

            path1.fillType = Path.FillType.EVEN_ODD
            drawPath(path1, paint)
        }
    }

代码效果展示

4、INVERSE_EVEN_ODD

该放手与 EVEN_ODD 被填充的区域刚好相反 代码展示

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path1.reset()
        canvas?.apply {
            path1.addCircle(200f, 200f, 100f, Path.Direction.CW)
            path1.addCircle(300f, 300f, 150f, Path.Direction.CW)

            path1.fillType = Path.FillType.INVERSE_EVEN_ODD
            drawPath(path1, paint)
        }
    }

代码效果展示

完

卡布哥哥学安卓
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Android自定义控件-温度控制旋转按钮.zip
03-07
Android自定义控件-温度控制旋转按钮.zip Android自定义控件，温度控制旋转按钮
Android自定义控件---联系人列表A-Z排序
04-30
Android自定义控件---联系人列表A-Z排序 此demo的博客地址：http://blog.csdn.net/u012814441
android path 合并_Android Path学习笔记
weixin_32267059的博客
12-28 438
简单说说Path是android中用来封装几何学路径的一个类，因为Path在图形绘制上占的比重还是相当大的，所以经过学习后，对Path中方法进行总结使用与应用Path类的方法图1 Path方法Path中的方法相对较多，不对期进行一一说明，将平时用的较多的方法拿出来着重说明(1) 将路径连接至某个坐标点lineTo(float x, float y)**(2)改变起始点的位置 **moveTo(fl...
Path相关方法讲解(一)
热门推荐
GAStudio
06-15 1万+
上一篇主要讲了Canvas的translate(平移) 、scale(缩放) 、rotate(旋转) 、skew(错切)，接下来几篇主要讲下android里的Path（封装了贝塞尔曲线）& Canvas里的drawPath(path,paint); 很多人听到贝塞尔曲线，就觉得似乎挺高端大气上档次，后面会和大家一起揭开它的面纱，一睹真容； Path（路径）： 我们先看看Path类里有哪些方法
Android Path类
假装你是大灰狼的专栏
02-19 2892
1. Path常用方法 点操作 // 设置起始点，(x,y)为绝对路径，(dx,dy)为相对路径 moveTo(float x, float y) rMoveTo(float dx, float dy) 线操作 // 设置线的终点，(x,y)为绝对路径，(dx,dy)为相对路径 lineTo(float x, float y) rLineTo(float dx, ...
Android中Path的使用
04-21
NULL 博文链接：https://uwind.iteye.com/blog/1919505
Android开发之Path详解
Davis
07-16 1万+
一、xxxTo方法 Path类中提供了一套xxxTo方法，其作用是从起点到终点移动path画笔并绘制线（moveTo方法只移动path画笔不绘制线），线有直线和曲线。 方法汇总如下表所示： 方法名 参数解析 lineTo(float x, float y) 绘制直线，x：终点x坐标值，y：终点y坐标值 moveTo(float x, float y) 移动画笔，x：终点x坐标值...
Android Path的使用详解
数据结构和算法
10-13 1万+
尊重原创，转载请标明出处    http://blog.csdn.net/abcdef314159 这里来分析一下Android自定义控件中比较常用的另一个类Path/** * The Path class encapsulates compound (multiple contour) geometric paths * consisting of straight line segmen
用Path来绘制一些图形
weixin_33810302的博客
02-26 447
Path是android中用来封装几何学路径的一个类，因为Path在图形绘制上占的比重还是相当大的。你可以用它来绘制各种样式的几何图形，做图表什么的都可以。   一、画线段 1.1 lineT(float x, float y) 先来看一段代码： @Override protected void onDraw(Canvas canvas) { su...
Android关于Path你所知道的和不知道的一切
张风捷特烈的博客
11-06 1533
零、前言 1.canvas本身提供了很多绘制基本图形的方法，普通绘制基本满足 2.但是更高级的绘制canvas便束手无策，但它的一个方法却将图形的绘制连接到了另一个次元 3.下面进入Path的世界，[注]:本文只说Path，关于绘制只要使用Canvas.drawPath(Path,Paint)即可 4.本文将对Path的所有API进行测试。 一、引：...
RadarChartView, 用于绘制射线图的Android视图( 小部件).zip
09-17
RadarChartView, 用于绘制射线图的Android视图( 小部件) 用于渲染射线图的视图( 小部件)演示 ：如何启动从代码// Prepare the data. We're going to show the top ten cheese producing U.S. states
android 自定义控件-编辑框
最新发布
10-24
android 自定义控件----编辑框
Android-Android自定义控件-签到日历
08-12
项目中用到的一个签到日历自定义控件，基于网络源码的部分修改而成，满足自己项目的需求了。
Android自定义控件-仿今日头条图片上下滑动退出
02-02
Android自定义控件-仿今日头条图片上下滑动退出
Kotlin Flow详解
ymeddmn的博客
08-15 9176
官方 flow 地址：https://www.kotlincn.net/docs/reference/coroutines/flow.html flow 说明 流简单使用 suspend fun flow1() { flow<Int> { (0..4).forEach { emit(it)//生产者发送数据 } }.collect { println(it)//消费者处理数据 } } 本例中 flo
使用RecycleView优雅的实现数据列表更新
ymeddmn的博客
04-03 6518
近期需要对公司的祖传项目进行一些重构，在重构过程中涉及到多个列表的重构。老的列表中更新数据一直使用的notifyDataSetChanged进行数据的更新。从我入职时期这便是我的一大心病，因此这次一并解决 问题描述 关于notifyDataSetChanged的弊端，无需赘言，他会对 Recycleview 的整个列表进行刷新。因此在大数据量场景下（目前此种更新数据方法也不早再是官方推荐的了），这可能是很大的性能障碍。 解决方案： 使用 ListAdapter 进行局部刷新数据 使用 DiffUtil.
android Compose中沉浸式设计和导航栏的处理
ymeddmn的博客
11-02 4927
关注公众号学习更多知识 Material Design风格的顶部和底部导航栏 Compose中Material Design风格的设计我们的做法如下： 1、使用Scafoold作为页面的顶级，Scafoold中承载topbar和bottombar分别作为顶部导航栏和底部导航栏。 2、调用WindowCompat.setDecorFitsSystemWindows(window, false)方法让我们的布局超出状态栏和底部导航栏的位置 3、使用ProvideWindowInsets包裹布局，使我们可以.
android通知详解
ymeddmn的博客
08-15 4700
概览 通知是 android 系统存在至今为止被变更最为频繁的 api 之一，android 4.1、4.4、5.0、7.0、8.0 都对通知做过比较大的改动。到了 8.0 通知功能趋于稳定，至今没有做过更大的改动。 对一个 api 进行如此大的照顾那么这必然是个非常重要的 api 了。那么就跟随我一起揭开通知一点都不神秘的面纱吧。 注：本文主要讲应用 通知使用 创建简单通知 我们使用 NotificationCompat 来创建通知，使用 NotificationCompat 可以兼容所有的系统版本，
Jetpack Compose中ViewModel、Flow、Hilt、Coil的使用
ymeddmn的博客
08-14 4674
Compose可以配合多个Jetpack组件使用 Compose可以配合多个Jetpack组件开发提高开发效率 多种组合方式 Compose配合ViewModel使用 概述 Compose中ViewModel的使用和Jetpack一致，通常我们构建页面的时候，如果一条数据多个布局都需要使用到的话我们只能在方法的形参中层层传递。但是这样明显是不合理的，会降低代码的可读性。 使用ViewModel可以完美的解决这个问题，Compose中使用ViewModel的话需要引入lifecycle-viewmodel-c
<!--listView自定义控件-->
06-13
好的，我了解了你的问题。ListView 自定义控件可以实现一些特定的功能和效果，比如可以自定义每个列表项的布局、添加分割线、添加头部...当然，还有很多其他的 ListView 自定义控件，可以根据实际需求进行选择和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值