View 自定义 - 路径 Path

已于 2023-11-08 21:34:57 修改
阅读量93 收藏
点赞数
分类专栏： View 文章标签： android
于 2023-11-08 17:15:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HugMua/article/details/134291598
版权

参考文章

一、概念

用于描述顺序 & 区域，单使用无法产生效果。

图形绘制的本质是先画点再将点连接起来，所以点与点之间是存在一个先后顺序的。图形的方向影响的是：添加图形时确定闭合顺序(各个点的记录顺序)、图形的渲染结果(是判断图形渲染的重要条件)。 

1.1 开放路径、闭合路径

1.2 判断点在图形内还是图形外

1.2.1 奇偶规则

从任意位置 P 作一条射线，对与图形的边相交的点数进行判断：

  • 若相交的点数为奇数，则认为 P 为图形内的点。
  • 若相交的点数为偶数，则认为 P 为图形外的点。

1.2.2 非零环绕数规则

从任意位置 P 作一条射线，当 P 点沿射线方向移动时，对在每个方向上穿过射线的边进行判断：

  • 每当图形的边从右到左穿过射线时 +1，从左到右穿过时 -1。
  • 若环绕数为 ≠0 则 P 为图形内的点，否则为图形外的点。

二、创建对象

Path 的起点坐标默认为 (0,0)。

  •  建全局 Path 对象，在 onDraw() 中按需修改，不要在 onDraw() 里创建，因为若 View 频繁刷新，就会频繁创建对象，拖慢刷新速度。
val path = Path()

三、设置路径

moveTo()

public void moveTo(float x, float y)

移动到新的坐标点，并作为新的起点，影响后续路径绘制。

setLastPoint()

public void setLastPoint(float dx, float dy)

移动到新的坐标点，不会改变原有起点，不影响后续路径绘制。

lineTo()

public void lineTo(float x, float y)

移动到新的坐标点，且和之前的点用直线连接。

close()

public void close()

闭合路径，将当前点和起始点连接。如果终点和起点连接后仍无法形成封闭图形则什么也不做。

先 lineTo(400,500)，分别使用 moveTo(300,300) 和 setLastPoint(300,300)，再 lineTo(900,800)，最后 close()。 

四、重置路径

FillType 影响显示效果，数据结构影响重建速度，一般选择 reset()。

reset()

public void reset()

保留 FillType 设置，不保留原有数据结构。

rewind()

public void rewind()

不保留 FillType 设置，保留原有数据结构。

五、添加路径

5.1 基本图形

添加图形路径后会改变路径的起点。形参 dir 即方向 direction，指定绘制时是顺时针还是逆时针（CW为顺时针clockwise，CCW为逆时针counter-clockwise）。

addRect()

矩形

addRect(RectF rect, Path.Direction dir)

路径起点变为矩形的左上角顶点。

addRoundRect()

圆角矩形

addRoundRect(RectF rect, float rx, float ry, Path.Direction dir)

addArc()

arcTo()

圆弧

public void addArc (RectF oval, float startAngle, float sweepAngle)

startAngle起始角度，sweepAngle绘制扫过的角度。

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

与上面方法唯一不同的是：如果圆弧的起点和最后一个坐标点不相同，就连接两个点。

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

forceMoveTo：是否将之前路径的结束点设置为圆弧起点。设为 true 在新的起点画圆弧，不连接最后一个点与圆弧起点，即与之前路径没有交集（同第一个）。设为 false 在新的起点画圆弧，但会连接之前路径的结束点与圆弧起点，即与之前路径有交集（同第二个）。

addCircle()

圆形

addCircle(float x, float y, float radius, Path.Direction dir)

路径起点变为圆在X轴正方向最大的点 。

addOval()

椭圆形

addOval(RectF oval, Path.Direction dir) 

oval作为椭圆的外切矩形区域。

canvas.translate(350, 500)    //为了方便观察,平移坐标系
path.addRect(0, 0, 400, 400, Path.Direction.CW)    //顺时针
//path.addRect(0,0,400,400, Path.Direction.CCW)    //逆时针
canvas.drawPath(path paint)

5.1.1 矩形 addRect()

addRect(RectF rect, Path.Direction dir)

路径起点变为矩形的左上角顶点。

5.1.2 圆角矩形 addRoundRect()

addRoundRect(RectF rect, float rx, float ry, Path.Direction dir)

5.1.3 圆弧 addArc()、arcTo()

public void addArc (RectF oval, float startAngle, float sweepAngle)

startAngle起始角度，sweepAngle绘制扫过的角度。

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

与上面方法唯一不同的是：如果圆弧的起点和最后一个坐标点不相同，就连接两个点。

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

forceMoveTo：是否将之前路径的结束点设置为圆弧起点。设为 true 在新的起点画圆弧，不连接最后一个点与圆弧起点，即与之前路径没有交集（同第一个）。设为 false 在新的起点画圆弧，但会连接之前路径的结束点与圆弧起点，即与之前路径有交集（同第二个）。

5.1.4 圆形 addCircle()

addCircle(float x, float y, float radius, Path.Direction dir)

路径起点变为圆在X轴正方向最大的点 。

5.1.5 椭圆形 addOval()

addOval(RectF oval, Path.Direction dir) 

oval作为椭圆的外切矩形区域。

5.2 合并路径 addPath()

public void addPath(Path src)
public void addPath(Path src, Matrix matrix)
public void addPath(Path src, float dx, float dy)

将 src 路径添加过来，dx dy 是先偏移后再添加，matrix 是先变换后再添加。

canvas.translate(350, 500)    //为了方便观察,平移坐标系
Path pathRect = new Path()
Path  pathCircle = new Path()
pathRect.addRect(-200, -200, 200, 200, Path.Direction.CW)    // 画一个矩形路径
pathCircle.addCircle(0, 0, 100, Path.Direction.CW)    // 画一个圆形路径
pathRect.addPath(pathCircle, 0, 200)    // 将圆形路径移动(0,200),再添加到矩形路径里
canvas.drawPath(pathRect,mPaint1)    // 绘制合并后的路径

六、判断路径属性

6.1 内容是否为空 isEmpty()

public boolean isEmpty()

判断path中是否包含内容。

6.2 是否为矩形 isRect()

public boolean isRect(RectF rect)

判断path是否是一个矩形，如果是的话会将矩形信息方巾参数 rect 中。

path.lineTo(0,400)
path.lineTo(400,400)
path.lineTo(400,0)
path.lineTo(0,0)
RectF rect = new RectF()
boolean b = path.isRect(rect)    //true
//rect存放信息：
//rect.left = 0
//rect.top = 0
//rect.right = 400
//rect.bottom = 400

6.3 替换 set()

public void set(Path src)

用 src 路径替代现有路径。

path1.addRect(-200,-200,200,200, Path.Direction.CW)    //矩形路径
path2.addCircle(0,0,100, Path.Direction.CW)    //圆形路径
path1.set(path2)    //将圆形路径代替矩形路径

6.4 偏移 offset()

public void offset(float dx, float dy)

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

偏移位置，dst 用来存储平移后的路径状态但不影响当前路径。

canvas.translate(350, 500)    //为了方便观察,平移坐标系
//path中添加一个圆形(圆心在坐标原点)
path = new Path()
path.addCircle(0, 0, 100, Path.Direction.CW)
//平移路径并存储平移后的状态
Path dst = new Path()
path.offset(400, 0, dst)    //平移
canvas.drawPath(path, mPaint1)    //绘制path
//通过dst绘制平移后的图形(红色)
mPaint1.setColor(Color.RED)
canvas.drawPath(dst,mPaint1)

七、设置路径填充颜色 xxxFillType()

getFillType()

public FillType getFillType()

设置填充规则。

setFillType()

public void setFillType(FillType ft)

获取当前填充规则。

isInverseFillType()

public boolean isInverseFillType()

判断是否是反向(INVERSE)规则。

toggleInverseFillType()

public void toggleInverseFillType()

切换填充规则(即原有规则与反向规则之间相互切换)。

  • 奇偶规则：EVEN_ODD
  • 反奇偶规则：INVERSE_EVEN_ODD
  • 非零环绕数规则：WINDING
  • 反非零环绕数规则：INVERSE_WINDING

canvas.translate(350, 500)    //为了方便观察,平移坐标系
path.addRect(-200, -200, 200, 200, Path.Direction.CW)    // 在Path中添加一个矩形
path.setFillType(Path.FillType.EVEN_ODD)    //设置Path填充模式为 奇偶规则
// path.setFillType(Path.FillType.INVERSE_EVEN_ODD)    // 反奇偶规则
canvas.drawPath(path, mPaint1)    //画出路径

 八、布尔操作 op()

 两个 Path 之间的运算，用简单的图形通过特定规则合成相对复杂的图形。

public boolean op(Path path, Op op)

对调用的 path 和传入的 path 执行布尔运算，运算结果存入到调用该方法的 path 中。

public boolean op(Path path1, Path path2, Op op)

对 path1 和 path2 执行布尔运算，运算结果存入到调用该方法的 path 中。

canvas.translate(550, 550)    //为了方便观察,平移坐标系
//画两个圆
path1.addCircle(0, 0, 100, Path.Direction.CW)
path2.addCircle(50, 0,100, Path.Direction.CW)
//取两个路径的异或集
path1.op(path2, Path.Op.XOR)
//画出路径
canvas.drawPath(path1, mPaint1)

九、贝塞尔曲线

参考文章

计算曲线的数学公式，任何一条曲线都可以用贝塞尔曲线表示。

数据点指路径的起始点和终止点。
控制点决定了路径的弯曲轨迹。根据控制点的个数，贝塞尔曲线被分为一阶贝塞尔曲线（0个控制点）、二阶贝塞尔曲线（1个控制点）、三阶贝塞尔曲线（2个控制点）等等。n+1阶贝塞尔曲线 = 有n个控制点。（1阶 = 一条直线，高阶可以拆解为多条低阶曲线）
绘制二阶贝赛尔曲线

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

(x1,y1)为控制点，(x2,y2)为终点

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

(x1,y1)为控制点距离起点的偏移量，(x2,y2)为终点距离起点的偏移量

绘制三阶贝赛尔曲线

public void conicTo(float x1, float y1, float x2, float y2, float weight)

(x1,y1),(x2,y2)为控制点，(x3,y3)为终点

public void rConicTo(float dx1, float dy1, float dx2, float dy2, float weight)

(x1,y1)，(x2,y2)为控制点距离起点的偏移量，(x3,y3)为终点距离起点的偏移量

Jomurphys
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 自定义View之Path详解
fengzi
08-19 2313
Path Path Path.Direction Path.FillType Path.Op Path的函数 The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and ...
自定义View-绘图基础之Path
bobo8945510的博客
11-18 2181
学习导航第一节：http://blog.csdn.net/bobo8945510/article/details/53197727 —自定义View—自定义属性及引用第二节：http://blog.csdn.net/bobo8945510/article/details/53203233 自定义view02—图形绘制使用Path绘制线 path类是一个非常有用的类，他可以预先在view上讲N个点
自定义View——Path 路径
M-Ellen的博客
10-20 575
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
android 自定义view path路径设置圆角
dongbeitcy的专栏
09-15 360
这个api使我从挣扎中解脱，这个属性对于绘制多变型 或者 不规则路径 制作圆角非常好用，也查过其他方法 什么贝塞尔曲线等感觉很复杂。CornerPathEffect 官方意思是将Path的各个衔接线段之间的夹角用一种更滑润的方法衔接，类似于圆弧。在绘制path 闭合路径的时候，路径的连接点都是直角，如果设置成圆角可以直接使用下面api。
css clip-path
CamilleZJ的博客
01-04 1352
clip-pathCSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。和canvas和svg的剪裁很像。 取值 <clip-source>：用<url>表示剪切元素的路径 <basic-shape>：一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框 <geometry-box>：如果同<basic-shape>一起声明，它将为基本形状提供相应的参考框盒。通过自定...
【Android 自定义 View】Path 的基本使用
Kevin Learn Android
01-07 653
本文会了解到 path (路径)这个 Canvas 中的神器，有了这个神器，就能创造出更多炫酷的东东。
Android自定义view--图形叠加Xfermode与PorterDuff
王温暖的博客
04-29 1883
首先来看下各个场景的效果，项目完整代码：https://github.com/buder-cp/CustomView/tree/master/buder_DN_view/buderdn04 上述效果的实现主要是使用图形的fermode与PorterDuff属性的叠加，下面是18中图形叠加模式 运行效果图： 1）PorterDuff.Mode.ADD： 饱和度叠加 2）Porte...
自定义View系列--Path绘制仿支付宝支付成功动画
lizebin_bin的博客
12-13 3456
使用Path绘制路径 仿支付宝支付成功动画
安卓自定义View进阶-Path基本操作
热门推荐
GcsSloop
03-02 1万+
在上一篇 Canvas 之图片文字中我们了解了如何使用 Canvas 中绘制图片文字，结合前几篇文章，Canvas 的基本操作已经差不多完结了，然而 Canvas 不仅仅具有这些基本的操作，还可以更加炫酷，本次会了解到 path(路径)这个 Canvas 中的神器，有了这个神器，就能创造出更多炫 (zhuang) 酷(B)的东东了。
Android自定义View--简易画板
xqppw111的博客
01-14 1859
自定义VIew实现简易画板效果，功能包括清空、选择颜色，选择大小，效果如下 画板布局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
Android自定义View绘图实现拖影动画
01-04
把Path的Style修改为FILL，效果是这样的： 可以看到一个个四边形，连成了路径。 好啦，现在说说怎样根据两点计算出包围它们连线的路径所需的四个点。 先看一张图： 在这张图里，黑色细线是我们拿到的两个触摸点...
Android自定义view Path 的高级用法之搜索按钮动画
01-06
关于Path之前写的也很多了，例如path绘制线，path绘制一阶，二阶和三阶贝塞尔路径，这些都是path的基本用法。今天我要带大家看的是Path 的高级用法，先上图，再吹。 效果大致是这样的。看着是不是挺好。话不多说，...
View自定义加载图片
01-12
仿着华为手机的loading做的View的自定义的练习，简单来说就是一个小圆环绕着圆环路径行走，可以作为加载框用在应用中，性能方面没有过多考虑，希望大家给予意见
Android自定义View实现弹性小球效果
01-05
自定义代码示例 public class BezierView extends View { Paint paint;//画笔 Path path;//路径 int radius = 50;//圆的半径 int time = 100;//计数时长 int index; int offsetIndex; float viewX, viewY;//...
MCustomSignatureView:自定义画板、手写签名工具、自定义View、Path学习、android
05-19
MCustomSignatureView自定义画板、手写签名工具、自定义View、Path学习、android手势绘制签名签名背景色设置签名文字颜色设置签名图保存，路径自定义签名清除签名居中 （有BUG）签名字体识别（有BUG）
Java中如何调用mysql中函数
codedadi的博客
06-10 743
在前端直接调用 MySQL 中的函数是不直接可能的，因为前端（如 JavaScript 在浏览器中）没有直接访问数据库的能力。请注意，安全性是这种交互中的一个重要考虑因素。确保你的后端 API 是安全的，并验证所有传入的请求和参数以防止潜在的安全风险，如 SQL 注入攻击。设置CallableStatement的参数（如果需要）：如果你的函数需要参数，使用CallableStatement的setXXX方法来设置它们。在你的后端服务中，编写一个 API 端点，该端点调用 MySQL 数据库中的函数。
PHP中的while循环：用法、技巧与最佳实践
最新发布
NatLindsay的博客
06-14 325
在PHP编程中，while循环是一种基本且常用的控制结构，用于重复执行代码块，直到指定条件为假。while循环在处理未知迭代次数的任务时特别有用，例如读取文件内容、处理用户输入或动态生成数据等。与for循环不同，while循环适用于那些无法预先确定循环次数的情境。，只要条件为真，循环体内的代码就会被一遍又一遍地执行。理解和灵活运用while循环，可以帮助开发者更高效地处理重复性任务，提高代码的可读性和维护性。
【MySQL】服务器配置和管理
p_fly的博客
06-09 835
MySQL服务器通常说的是mysqld程序。mysqld 是 MySQL 数据库服务器的核心程序，负责处理客户端的请求、管理数据库和执行数据库操作。管理员可以通过配置文件和各种工具来管理和监控 mysqld 服务器的运行本文将介绍下面三个内容：服务器启动选项：可以在命令行和配置文件中指定，用于配置服务器的行为和特性。服务器系统变量：反映了启动选项的当前状态和值，其中一些变量可以在服务器运行时修改。服务器状态变量：包含了关于运行时操作的计数器和统计信息。
MySQL 运算符绕过
2301_79629995的博客
06-09 431
在一些CTF题目中会出现过滤了and符号，此时可以尝试利用运算符绕过过滤
unplugin-auto-import 自定义导入路径Taro+vue3+ts
06-10
在 Taro + Vue 3 + TypeScript 项目中使用 unplugin-auto-import 自定义导入路径的步骤如下： 1. 安装所需依赖： ```bash npm install -D vite-plugin-auto-import ``` 2. 在 Vite 配置文件中添加插件，并配置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值