Android自定义视图 View 之重要知识点 Path 详解

最新推荐文章于 2021-05-25 16:47:25 发布
最新推荐文章于 2021-05-25 16:47:25 发布
阅读量990 收藏
点赞数 1
分类专栏： ----------Android---------- 文章标签： Android Android自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010194271/article/details/51682065
版权

惯例：先上图后说话，谢谢各位伙伴的支持! 有你们是我的福分！

             欢迎一起讨论和学习，QQ：732258496  微信：15520726587


 每日一言：梦想一定要有万一实现了呢！

Path常用方法

方法作用备注
moveTo移动起点移动下一次操作的起点位置
lineTo连接直线连接上一个点到当前点之间的直线
setLastPoint设置终点重置最后一个点的位置
close闭合路劲从最后一个点连接最初的一个点，形成一个闭合区域
addRect添加矩形添加矩形到当前Path
addRoundRect添加圆角矩形添加圆角矩形到当前Path
addOval添加椭圆添加椭圆到当前Path
addCircle添加圆添加圆到当前Path
addPah添加路劲添加路劲到当前Path
addArc添加圆弧添加圆弧到当前Path
arcTo圆弧绘制圆弧，注意和addArc的区别
isEmpty是否为空判定Path是否为空
isRect是否为矩形判定Path是否是一个矩形
set替换路劲用新的路劲替换当前路劲的所有内容
offset偏移路劲对当前的路劲进行偏移
quadTo贝塞尔曲线二次贝塞尔曲线的方法
cubicTo贝塞尔曲线三次贝塞尔曲线的方法
rMoveTo,rlineTo,rQuadTo,rCubicTorXxx方法不带r的方法是基于原点坐标系（偏移量），带r的基于当前点坐标系（偏移量）
op布尔操作对两个Path进行布尔运算（交集，并集）等操作
setFillType填充模式设置Path的填充模式
getFillType填充模式获取Path的填充
isInverseFillType是否逆填充判断是否是逆填充模式
toggleInverseFillType相反模式切换相反的填充模式
getFillType填充模式获取Path的填充
incReserve提示方法提示Path还有多少个点等待加入
computeBounds计算边界计算Path的路劲
reset，rewind重置路劲清除Path中的内容（reset相当于new Path , rewind 会保留Path的数据结构）
transform矩阵操作矩阵变换

Path方法使用详解

使用Path不仅可以绘制简单的图形（如圆形，矩形，直线等），也可以绘制复杂一些的图形（如正多边形，五角星等），还有绘制裁剪和绘制文本都会用到Path。由于方法比较多，我这里分组来讲下。

moveTo , lineTo , setLastPoint , close

先创建画笔：

<code class="hljs avrasm has-numbering">        paint = new Paint()<span class="hljs-comment">;</span>
        paint<span class="hljs-preprocessor">.setAntiAlias</span>(true)<span class="hljs-comment">;</span>
        paint<span class="hljs-preprocessor">.setStyle</span>(Paint<span class="hljs-preprocessor">.Style</span><span class="hljs-preprocessor">.STROKE</span>)<span class="hljs-comment">;</span>
        paint<span class="hljs-preprocessor">.setStrokeWidth</span>(<span class="hljs-number">10</span>)<span class="hljs-comment">;</span>
        paint<span class="hljs-preprocessor">.setColor</span>(Color<span class="hljs-preprocessor">.parseColor</span>(<span class="hljs-string">"#FF0000"</span>))<span class="hljs-comment">;</span></code>

注意paint.setStyle(Paint.Style.FILL);，设置画笔为实心。一些线条将在画布上看不见。

1、lineTo

首先我们来看看lineTo,如果你直接moveTo 将看不出效果。

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>

        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">400</span>,<span class="hljs-number">0</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path,paint)<span class="hljs-comment">;</span></code>

path

为了方便大家好观察坐标的变化，我在屏幕上画出了网格，每块网格的宽高都是100。由于第一次之前没有过操作，所以默认点就是原点（屏幕左上角），第一次lineTo就是坐标原点到(200,200)之间的直线。第二次lineTo就是上一次结束点位置(200,200)到(400,0)点之间的直线。

2、moveTo 和setLastPoint

方法预览：

<code class="hljs cs has-numbering">moveTo(<span class="hljs-keyword">float</span> x, <span class="hljs-keyword">float</span> y) 

setLastPoint(<span class="hljs-keyword">float</span> dx, <span class="hljs-keyword">float</span> dy)</code>

这两个方法在作用上有相似之处，却是两个不同的东西，具体参考下表：

方法名作用是否影响之前的操作是否影响之后的操作
moveTo移动下一次操作的起点位置否是
setLastPoint改变上一次操作点的位置是是

来看看下面的例子：

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>

        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">200</span>, <span class="hljs-number">200</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.moveTo</span>(<span class="hljs-number">300</span>,<span class="hljs-number">300</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">400</span>, <span class="hljs-number">0</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>

        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">200</span>, <span class="hljs-number">200</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.setLastPoint</span>(<span class="hljs-number">300</span>,<span class="hljs-number">100</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">400</span>, <span class="hljs-number">0</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

当我们绘制线条之前，调用moveTo 和 setLastPoint效果是一样的，都是对坐标原点(0,0)进行操作。setLastPoint是重置上一次操作的最后一点，在执行完第一次lineTo的时候，最后一个点就是(200,200),setLastPoint更改(200,200)为(300,100)，所以在执行的时候就是(300,100)到(400, 0)之间的连线了。

3、close

方法预览

<code class="hljs cs has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">close</span>()</code>

close方法连接最后一个点和最初一个点（如果两个点不重合）形成一个闭合的图形。

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.moveTo</span>(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">500</span>,<span class="hljs-number">100</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">300</span>,<span class="hljs-number">400</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.close</span>()<span class="hljs-comment">;</span>
        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

上图中可以看到lineTo(500,100)直线和lineTo(300,400)直线，而close方法就是连接(300,400)，(100,100)两点，形成一个闭合的区域。

注意：close的作用的封闭路径，如果连接最后一个点和最初一个点任然无法形成闭合的区域，那么close什么也不做。

quadTo,cubicTo

二次贝塞尔曲线以及三次贝塞尔曲线。

1、quadTo

方法预览

<code class="hljs cs has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">quadTo</span>(<span class="hljs-keyword">float</span> x1, <span class="hljs-keyword">float</span> y1, <span class="hljs-keyword">float</span> x2, <span class="hljs-keyword">float</span> y2)</code>

quadTo方法其中 (x1,y1) 为控制点，(x2,y2)为结束点。

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.moveTo</span>(<span class="hljs-number">100</span>,<span class="hljs-number">400</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.quadTo</span>(<span class="hljs-number">300</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">400</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

2、cubicTo

方法预览：

<code class="hljs cs has-numbering"><span class="hljs-keyword">pub</span></code>

cubicTo方法比quadTo方法多了一个点坐标，那么其中(x1,y1) 为控制点，(x2,y2)为控制点，(x3,y3) 为结束点。

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.moveTo</span>(<span class="hljs-number">100</span>, <span class="hljs-number">400</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.cubicTo</span>(<span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">400</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

绘制的图形和上面的quadTo绘制的图形是一样的。我们去掉moveTo来看看运行的效果图：

path

如果你想了解贝塞尔曲线公式，请链接这里

addXxx和arcTo

主要是向Path中添加基本图形以及区分addArc和arcTo

1、添加基本图形

方法预览：

<code class="hljs rust has-numbering"><span class="hljs-comment">//圆形</span>
addCircle(<span class="hljs-keyword">float</span> x, <span class="hljs-keyword">float</span> y, <span class="hljs-keyword">float</span> radius, Path.Direction <span class="hljs-keyword">dir</span>)
<span class="hljs-comment">//椭圆</span>
addOval(RectF oval, Path.Direction <span class="hljs-keyword">dir</span>)
addOval(<span class="hljs-keyword">float</span> left, <span class="hljs-keyword">float</span> top, <span class="hljs-keyword">float</span> right, <span class="hljs-keyword">float</span> bottom, Path.Direction <span class="hljs-keyword">dir</span>)
<span class="hljs-comment">//矩形</span>
addRect(RectF rect, Path.Direction <span class="hljs-keyword">dir</span>)
addRect(<span class="hljs-keyword">float</span> left, <span class="hljs-keyword">float</span> top, <span class="hljs-keyword">float</span> right, <span class="hljs-keyword">float</span> bottom, Path.Direction <span class="hljs-keyword">dir</span>)
<span class="hljs-comment">//圆角矩形</span>
addRoundRect(RectF rect, <span class="hljs-keyword">float</span> rx, <span class="hljs-keyword">float</span> ry, Path.Direction <span class="hljs-keyword">dir</span>) 
addRoundRect(<span class="hljs-keyword">float</span> left, <span class="hljs-keyword">float</span> top, <span class="hljs-keyword">float</span> right, <span class="hljs-keyword">float</span> bottom, <span class="hljs-keyword">float</span> rx, <span class="hljs-keyword">float</span> ry, Path.Direction <span class="hljs-keyword">dir</span>)
addRoundRect(RectF rect, <span class="hljs-keyword">float</span>[] radii, Path.Direction <span class="hljs-keyword">dir</span>)
addRoundRect(<span class="hljs-keyword">float</span> left, <span class="hljs-keyword">float</span> top, <span class="hljs-keyword">float</span> right, <span class="hljs-keyword">float</span> bottom, <span class="hljs-keyword">float</span>[] radii, Path.Direction <span class="hljs-keyword">dir</span>)</code>

我们仔细观察上面的方法，在最后都有一个Path.Direction，这是个什么东东呢？Direction的意思是方向，指导，趋势。点进去跟一下你会发现Direction是一个枚举类型（Enum）分别有CW（顺时针），CCW（逆时针）两个常量。那么它的作用主要有以下两点：

序号作用
1在添加图形时确定闭合顺序(各个点的记录顺序)
2对自相交图形的渲染结果有影响

我们先来看看闭合顺序的问题，添加一个矩形看看：

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.addRect</span>(<span class="hljs-number">100</span>, <span class="hljs-number">200</span>, <span class="hljs-number">500</span>, <span class="hljs-number">400</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

path

我将上面的代码CW改成CCW再运行一次，结果一模一样，尼玛区别在哪里啊。稍安勿躁，想看到区别就要用到setLastPoint（重置最后一个点的坐标）。我们来这样变变代码：

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.addRect</span>(<span class="hljs-number">100</span>, <span class="hljs-number">200</span>, <span class="hljs-number">500</span>, <span class="hljs-number">400</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.setLastPoint</span>(<span class="hljs-number">200</span>,<span class="hljs-number">400</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果立马现行：

path

为什么图形会发生奇怪的变化呢。我们先来分析一下，绘制一个矩形至少需要对角线的两个点，根据这两个点计算出四条边然后把四条边按照顺序连接起来。上图的起始坐标是（100,200）按着顺时针的方向连接（500,200），（500,400），（100,400）最后连接（100,200）形成一个矩形。setLastPoint是重置上一个操作点坐标及改变（100,400）为（200,400），所以出现了上图的效果。

接下来我们看看逆时针的情况：

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.addRect</span>(<span class="hljs-number">100</span>, <span class="hljs-number">200</span>, <span class="hljs-number">500</span>, <span class="hljs-number">400</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CCW</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.setLastPoint</span>(<span class="hljs-number">400</span>,<span class="hljs-number">300</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

我们理清楚了闭合的问题，相交问题与设置填充模式有关。

我以addCircle方法来讲解添加图形，并不会逐一讲解。

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.addCircle</span>(<span class="hljs-number">300</span>,<span class="hljs-number">300</span>,<span class="hljs-number">200</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

path

绘制圆形，（300,300）点表示圆心坐标，200 表示半径长度。

2、addPath

方法预览：

<code class="hljs cs has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">addPath</span>(Path src)
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">addPath</span>(Path src, <span class="hljs-keyword">float</span> dx, <span class="hljs-keyword">float</span> dy)
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">addPath</span>(Path src, Matrix matrix)</code>

addPath方法就是将两个路径合并到一起。第二个方法的dx,dy指的是偏移量，第三个方法是添加到当前path之前先使用Matrix进行变换。来看看下面例子：

<code class="hljs mathematica has-numbering">        <span class="hljs-keyword">Path</span> path = new <span class="hljs-keyword">Path</span>();
        path.addRect(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">400</span>,<span class="hljs-number">300</span>, <span class="hljs-keyword">Path</span>.<span class="hljs-keyword">Direction</span>.CW);

        <span class="hljs-keyword">Path</span> src=new <span class="hljs-keyword">Path</span>();
        src.addCircle(<span class="hljs-number">300</span>,<span class="hljs-number">300</span>,<span class="hljs-number">100</span>, <span class="hljs-keyword">Path</span>.<span class="hljs-keyword">Direction</span>.CW);
        path.addPath(src,<span class="hljs-number">0</span>,<span class="hljs-number">100</span>);

        canvas.drawPath(path, paint);</code>

效果图：

path

3、addArc与arcTo

方法预览：

<code class="hljs java has-numbering">addArc(RectF oval, <span class="hljs-keyword">float</span> startAngle, <span class="hljs-keyword">float</span> sweepAngle)
addArc(<span class="hljs-keyword">float</span> left, <span class="hljs-keyword">float</span> top, <span class="hljs-keyword">float</span> right, <span class="hljs-keyword">float</span> bottom, <span class="hljs-keyword">float</span> startAngle, <span class="hljs-keyword">float</span> sweepAngle)

arcTo(RectF oval, <span class="hljs-keyword">float</span> startAngle, <span class="hljs-keyword">float</span> sweepAngle)
arcTo(RectF oval, <span class="hljs-keyword">float</span> startAngle, <span class="hljs-keyword">float</span> sweepAngle, <span class="hljs-keyword">boolean</span> forceMoveTo)
arcTo(<span class="hljs-keyword">float</span> left, <span class="hljs-keyword">float</span> top, <span class="hljs-keyword">float</span> right, <span class="hljs-keyword">float</span> bottom, <span class="hljs-keyword">float</span> startAngle, <span class="hljs-keyword">float</span> sweepAngle, <span class="hljs-keyword">boolean</span> forceMoveTo)</code>

从方法名字上面看，这两个方法都是与圆弧有关，那么他们之间肯定是有区别的：

名称作用区别
addArc添加一个圆弧到Path直接添加一个圆弧到path中，和上一次操作点无关
arcTo添加一个圆弧到Path添加一个圆弧到path中，如果圆弧的起点和上次操作点坐标不同就连接两个点

startAngle表示开始圆弧度数（0度与X轴方向对齐，顺时针移动，弧度增大）。

注意：sweepAngle表示运动了多少弧度，并不是结束弧度。

forceMoveTo表示“是否强制使用moveTo”，也就是说是否使用moveTo将上一次操作点移动到圆弧的起点坐标。默认是false。

forceMoveTo含义
true将最后一个点移动到圆弧起点，即不连接最后一个点与圆弧起点
false不移动，而是连接最后一个点与圆弧起点(注意之前没有操作的话，不会连接原点)

示例：

<code class="hljs avrasm has-numbering">        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">200</span>, <span class="hljs-number">200</span>)<span class="hljs-comment">;</span>
        RectF rectF = new RectF(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">400</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.arcTo</span>(rectF, <span class="hljs-number">0</span>, <span class="hljs-number">270</span>, true)<span class="hljs-comment">;</span>
        // path<span class="hljs-preprocessor">.addArc</span>(rectF,<span class="hljs-number">0</span>,<span class="hljs-number">270</span>)<span class="hljs-comment">;和上面一句等价</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

我们把 path.arcTo(rectF, 0, 270, true);改成 path.arcTo(rectF, 0, 270, false);，来看看效果图：

path

从上面两张图可以看出明显的变化。

isEmpty、 isRect、 set 和 offset

isEmpty

判断path中是否包含内容。

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>
        Log<span class="hljs-preprocessor">.e</span>(<span class="hljs-string">"-----"</span>,<span class="hljs-string">"----"</span>+path<span class="hljs-preprocessor">.isEmpty</span>())<span class="hljs-comment">;//-----: ----true</span>
        path<span class="hljs-preprocessor">.lineTo</span>(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)<span class="hljs-comment">;</span>
        Log<span class="hljs-preprocessor">.e</span>(<span class="hljs-string">"-----"</span>,<span class="hljs-string">"----"</span>+path<span class="hljs-preprocessor">.isEmpty</span>())<span class="hljs-comment">;//-----: ----false</span>

        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>
isRect

方法预览：

<code class="hljs erlang has-numbering"><span class="hljs-function"><span class="hljs-title">isRect</span><span class="hljs-params">(<span class="hljs-variable">RectF</span> rect)</span></span></code><ul style="" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

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

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>
        RectF rectF = new RectF()<span class="hljs-comment">;</span>
        rectF<span class="hljs-preprocessor">.left</span> = <span class="hljs-number">100</span><span class="hljs-comment">;</span>
        rectF<span class="hljs-preprocessor">.top</span> = <span class="hljs-number">100</span><span class="hljs-comment">;</span>
        rectF<span class="hljs-preprocessor">.right</span> = <span class="hljs-number">400</span><span class="hljs-comment">;</span>
        rectF<span class="hljs-preprocessor">.bottom</span> = <span class="hljs-number">300</span><span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.addRect</span>(rectF, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>
        boolean isRect = path<span class="hljs-preprocessor">.isRect</span>(rectF)<span class="hljs-comment">;</span>
        Log<span class="hljs-preprocessor">.e</span>(<span class="hljs-string">"-----"</span>,<span class="hljs-string">"------"</span>+isRect)<span class="hljs-comment">;//-----: ------true</span></code>
set

方法预览：

<code class="hljs cs has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">set</span>(Path src)</code>

将新的path赋值到现有path。相当于运算符中的“=”，如a=b,把b赋值给a

还是一起来看个例子：

<code class="hljs mathematica has-numbering">        <span class="hljs-keyword">Path</span> path = new <span class="hljs-keyword">Path</span>();
        path.addRect(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">400</span>,<span class="hljs-number">300</span>, <span class="hljs-keyword">Path</span>.<span class="hljs-keyword">Direction</span>.CW);
        <span class="hljs-keyword">Path</span> src=new <span class="hljs-keyword">Path</span>();
        src.addCircle(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>, <span class="hljs-keyword">Path</span>.<span class="hljs-keyword">Direction</span>.CW);
        path.set(src);
        canvas.drawPath(path, paint);</code>

效果图：

path

offset

方法预览：

<code class="hljs cs has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">offset</span>(<span class="hljs-keyword">float</span> dx, <span class="hljs-keyword">float</span> dy)
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">offset</span>(<span class="hljs-keyword">float</span> dx, <span class="hljs-keyword">float</span> dy, Path dst)</code>

这个方法就是对Path进行一段平移，正方向和X轴，Y轴方向一致（如果dx为正数则向右平移，反之向左平移；如果dy为正则向下平移，反之向上平移）。我们看到第二个方法多了一个dst，这个又是一个什么玩意呢，其实参数das是存储平移后的path的。

用例子来说明一下：

<code class="hljs mathematica has-numbering">        <span class="hljs-keyword">Path</span> path = new <span class="hljs-keyword">Path</span>();
        path.addCircle(<span class="hljs-number">300</span>, <span class="hljs-number">200</span>, <span class="hljs-number">100</span>, <span class="hljs-keyword">Path</span>.<span class="hljs-keyword">Direction</span>.CW);

        <span class="hljs-keyword">Path</span> dst = new <span class="hljs-keyword">Path</span>();
        dst.addCircle(<span class="hljs-number">500</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>, <span class="hljs-keyword">Path</span>.<span class="hljs-keyword">Direction</span>.CW);

        path.offset(-<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, dst);
        canvas.drawPath(path, paint);</code>

效果图：

path

从运行效果图可以看出，虽然我们在dst中添加了一个圆形，但是并没有表现出来，所以，当dst中存在内容时，dst中原有的内容会被清空，而存放平移后的path。

FillType

方法预览：

<code class="hljs cs has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setFillType</span>(Path.FillType ft)
<span class="hljs-keyword">public</span> Path.FillType <span class="hljs-title">getFillType</span>()</code>

setFillType方法中的参数Path.FillType为枚举类型：

FillType值含义
FillType.WINDING取path所有所在区域 默认值
FillType.EVEN_ODD取path所在并不相交区域
FillType.INVERSE_WINDING取path所有未占区域
FillType.INVERSE_EVEN_ODD取path未占或相交区域

path所在区域
path所在区域
path所在区域

setFillType

WINDING

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.addCircle</span>(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.addCircle</span>(<span class="hljs-number">200</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.setFillType</span>(Path<span class="hljs-preprocessor">.FillType</span><span class="hljs-preprocessor">.WINDING</span>)<span class="hljs-comment">;</span>
        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图：

path

EVEN_ODD

代码我就不贴了，直接上图（上mis）：

path

INVERSE_WINDING

path

INVERSE_EVEN_ODD

path

isInverseFillType

是否是逆填充模式：WINDING 和 EVEN_ODD 返回false；
INVERSE_WINDING 和 INVERSE_EVEN_ODD 返回true；

toggleInverseFillType

切换相反的填充模式，如果填充模式为WINDING则填充模式为INVERSE_WINDING，反之为WINDING模式；如果填充模式为EVEN_ODD则填充模式为INVERSE_EVEN_ODD，反之为EVEN_ODD模式。

举个例子：

<code class="hljs avrasm has-numbering">        Path path = new Path()<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.addCircle</span>(<span class="hljs-number">300</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.addCircle</span>(<span class="hljs-number">200</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>, Path<span class="hljs-preprocessor">.Direction</span><span class="hljs-preprocessor">.CW</span>)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.setFillType</span>(Path<span class="hljs-preprocessor">.FillType</span><span class="hljs-preprocessor">.INVERSE</span>_EVEN_ODD)<span class="hljs-comment">;</span>
        path<span class="hljs-preprocessor">.toggleInverseFillType</span>()<span class="hljs-comment">;</span>
        canvas<span class="hljs-preprocessor">.drawPath</span>(path, paint)<span class="hljs-comment">;</span></code>

效果图和上面EVEN_ODD模式一模一样。

path

黄毛火烧雪下
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android-自定义View实现二维码网格扫描+纵向雷达的扫描效果
M075097的博客
11-14 6772
Android-自定义View实现二维码网格扫描+纵向雷达的扫描效果
android自定义view
09-18
### Android自定义View知识点详解 #### 一、自定义View基础概述 自定义View是Android开发中的一个重要领域，尤其在需要实现复杂界面效果时尤为重要。本文档基于HenCoder的自定义绘制系列教程，主要介绍了自定义...
自定义View之Region区域
LayneYao的博客
10-09 1502
Region在Android的绘制中是区域的意思，使用Region可以对图形进行很多操作，比如区域的合并，取交集、或抑或等等。 Region的构造函数有以下四个： public Region() //无参构造 public Region(Region region) //传入指定一个区域 public Region(Rect r) //传入一个矩形 public Region(int left...
Android 自定义View
zengruiyue的博客
09-09 349
做Android布局是件很享受的事，这得益于他良好的xml方式。使用xml可以快速有效的为软件定义界面。可是有时候我们总感觉官方定义的一些基本组件不够用，自定义组件就不可避免了。那么如何才能做到像官方提供的那些组件一样用xml来定义他的属性呢？现在我们就来讨论一下他的用法。 ...
android:自定义view--区线图
Zheng
04-05 724
老规矩，先上图，整个自定义view分为标题模块，xy轴标注数据模块和数据模块， 其实数据模块是有一个浅灰色的背景，但是动态图里面看不出来，真机上可以看出； 和前面几个图表相比增加了贝塞尔区线，虚线，手势点击显示标注线和当前日数据； 后面还有左右按钮切换上周下周数据，这个不是主要功能，就不加到博客中了，真实项目使用直接将数据准备好， 左右切换的时候切换数据源刷新view即可； 老...
安卓自定义view实现显示不规则图片和不规则点击区域（修复了Toast的BUG）
weixin_43390435的博客
05-16 481
首先想要设置一个圆形的点击区域，圆的标准方程是 (x-a)^2^+(y-b)^2^=r^2^ 但是在java中求任意数的任意次方是不能直接求的 首先新建类名为tools的工具类（不是四大组件，因此不需要在androidmanifest.xml里声明）用于计算一个任意long型数的任意long型次方和快速显示浮动的toast public class tools { public static long fun(long x, long y) { long ret = 1;
Django 404、500页面全局配置知识点详解
09-17
- 创建相应的视图函数，如`custom_404_view`，该函数负责渲染自定义的404错误页面。例如： ```python def custom_404_view(request, exception): return render(request, 'app_name/404.html', status=404) ```...
Android-CircleTextView(圆形文字View)
08-13
**Android-CircleTextView详解** 在Android开发中，我们经常需要创建一些自定义的视图来满足界面设计的独特需求。`CircleTextView`就是这样一个特殊的视图，它将普通的TextView包裹在一个圆形的布局中，使得文字...
Android应用源码之Cy3DRotateView.rar
12-17
【知识点详解】 1. **Android应用开发基础**：首先，我们需要了解Android应用程序的基本结构，包括Activity、Layout、Intent等核心概念，以及AndroidManifest.xml文件的作用。 2. **自定义视图**：在Android中，...
自定义View实战七：自定义切割view并在每个区域设置点击事件
songzi1228的博客
10-22 630
目录 0、相关文章 1、根据文章一所写： 1.1、CutView.java 1.2、CutView1Activity.java 1.3、activity_cut_view.xml 2、自己写的一个自定义View 2.1、CutView3.java 2.2、CutView3Activity.java 2.3、activity_cut_view3.xml 0、相关文章 关于...
android 自定义圆角view,Android自定义View实现圆角遮罩效果
weixin_39927848的博客
05-25 356
Android自定义View实现圆角遮罩效果2020年08月14日|萬仟网移动技术 |我要评论圆角遮罩效果一图胜千言这种效果用于在裁剪图片，确定裁剪范围；或者APP引导用户，突显某个区域，还是挺实用。1.引言这是一个自定义View练习的Demo，通过两种方式实现此效果，通过本文可以学习到Xfermode的使用View级别的离屏缓冲Canvas的离...
【Android 自定义 View】Path 的基本使用
Kevin Learn Android
01-07 679
本文会了解到 path (路径)这个 Canvas 中的神器，有了这个神器，就能创造出更多炫酷的东东。
Android中Path类的lineTo方法和quadTo方法画线的区别
热门推荐
stevenhu_223的专栏
07-02 7万+
但我们需要在屏幕上形成画线时，Path类的应用是必不可少的，而Path类的lineTo和quadTo方法实现的绘制线路形式是不一样的；    1. Path--->quadTo(float x, float y) :       该方法实现的是当我们不仅仅是画一条线而且是画弧线时会形成平滑的曲线，该曲线又称为"贝塞尔曲线"(Bezier curve)，下面以一个Demo来结合理解quad
Android 绘图(三) Path
zhangxiaowei
08-09 1003
前面两篇文章Android 绘图(一) Paint  和 Android 绘图(二) Canvas  ，分别介绍了有关画笔和画布， 今天来看看另外一个和绘图有关的类-Path(路径)。       先看看官方文档对Path(路径)的描述： The Path class encapsulates compound (multiple contour) geometric paths consis
Android高级进阶之自定义View
Peter的专栏
09-13 1万+
前言 在网上看到一张图，花了一天时间，自己尝试着写了一个自定义View，里面涉及到了自定义属性、自定义View padding属性的处理、画笔（Paint）和画布（Canvas）的使用、分辨率适配问题、性能问题等，觉得还是有些东西值的记录一下的，效果图如下： 自定义属性 基础属性定义说明： 属性类型 属性定义方式 属性值说明 color FF5...
android自定义view之 判断一个点是否在制定矩形内
u010652002的博客
05-17 2841
/** * 判断点是否在圆内 * * @param pointF 待确定点 * @param circle 圆心 * @param radius 半径 * @return true在圆内 */ private boolean isPointInCircle(PointF pointF, PointF circle, float radius) { return Math.po
Android自定义View的四种方式
nihaomabmt的专栏
12-01 7151
一 前言 在Android开发中有很多业务场景，原生的控件是无法满足应用，并且经常也会遇到一个UI在多处重复使用情况，那么就需要通过自定义View的方式来实现这些UI效果。作为一个Android开发工程师自定义View属于一个必备技能。 像前几天正好做了一个上传本地图片的网格UI，点击相机的icon就可以上传选择本地图片，选中图片之后就可以显示的界面上。本来可以使用Android原生GridView，但是这个控件由于嵌套到ScrollView中，所以导致滑动事件冲突，当然网上...
android Path类中的moveTo和lineTo的区别
写博客只为学习
04-11 6832
1、moveTo moveTo 不会进行绘制，只用于移动移动画笔。 结合以下方法进行使用。 2、lineTo lineTo 用于进行直线绘制。 mPath.lineTo(300, 300); canvas.drawPath(mPath, mPaint); 默认从坐标(0,0)开始绘制。 刚才我们不说了moveTo是用来移动画笔的吗？ mPath.moveTo(100, 100); mP
Android自定义组件深度解析
自定义View的开发涉及到多个关键知识点： 1. 绘图与图形操作：自定义View的核心是重写`onDraw()`方法，通过Canvas对象进行绘图。这包括了解如何使用Path、Paint、Rect等类进行图形绘制，以及对颜色、渐变、阴影的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

黄毛火烧雪下

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

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

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

打赏作者

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

抵扣说明：

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

余额充值