自定义View(Path二)

2017-07-18  本文已影响0人  fcott

上一篇内容自定义View(Path一)
http://www.jianshu.com/p/7c1fde3e6c13

上一篇把Path常用的方法大致讲了一下,这里再稍微做一些补充。

Path.setFillType()

我们知道,Paint(画笔)可以设置填充模式mPaint.setStyle(Paint.Style.FILL);那么问题来了,如果我们绘制两个相交的矩形:


应该是填充成这样呢?

还是这样呢?

android给我们提供了设置填充模式的方法:

Path.setFillType(Path.FillType ft) //设置填充方式

我们要给一个图形内部填充颜色,首先需要分清哪一部分是外部,哪一部分是内部,机器不像我们人那么聪明,机器是如何判断内外呢?
我们点进setFillType()方法的源码,发现参数(Path.FillType)是一个枚举类型,共有4个选择,方法中填入不同的 FillType 值,就会有不同的填充效果。FillType 的取值如下:

EVEN_ODD
WINDING (默认值)
INVERSE_EVEN_ODD
INVERSE_WINDING
其中后面的两个带有 INVERSE_ 前缀的,只是前两个的反色版本,所以只要把前两个,即 EVEN_ODD 和 WINDING,搞明白就可以了。

EVEN_ODD 和 WINDING 的原理

EVEN_ODD
即 even-odd rule (奇偶原则):对于平面中的任意一点,向任意方向射出一条射线,这条射线和图形相交的次数(相交才算,相切不算哦)如果是奇数,则这个点被认为在图形内部,是要被涂色的区域;如果是偶数,则这个点被认为在图形外部,是不被涂色的区域。

射线的方向无所谓,同一个点射向任何方向的射线,结果都是一样的,不信你可以试试。从上面的描述可以看出,射线每穿过图形中的一条线,内外状态就发生一次切换,这就是为什么 EVEN_ODD 是一个「交叉填充」的模式。
WINDING
即 non-zero winding rule (非零环绕数原则):首先,它需要你图形中的所有线条都是有绘制方向的(上一篇讲过,Path所有的路径都是由绘制方向的):

图片来源于网络
然后,同样是从平面中的点向任意方向射出一条射线,但计算规则不一样:以 0 为初始值,对于射线和图形的所有交点,遇到每个顺时针的交点(图形从射线的左边向右穿过)把结果加 1,遇到每个逆时针的交点(图形从射线的右边向左穿过)把结果减 1,最终把所有的交点都算上,得到的结果如果不是 0,则认为这个点在图形内部,是要被涂色的区域;如果是 0,则认为这个点在图形外部,是不被涂色的区域。

和 EVEN_ODD 相同,射线的方向并不影响结果。

Android其他与填充模式相关的方法

这些都是Path中的方法。

方法 作用
setFillType 设置填充规则
getFillType 获取当前填充规则
isInverseFillType 判断是否是反向(INVERSE)规则
toggleInverseFillType 切换填充规则(即原有规则与反向规则之间相互切换)

重置路径

重置Path有两个方法,分别是reset和rewind,两者区别主要有以下两点:

|方法| 是否保留FillType设置| 是否保留原有数据结构|
| ------------- |:-------------:|
|reset |是 |否|
|rewind| 否 |是|
这个两个方法应该何时选择呢?

选择权重: FillType > 数据结构
因为“FillType”影响的是显示效果,而“数据结构”影响的是重建速度。

布尔操作(API19)

布尔操作与我们中学所学的集合操作非常像,只要知道集合操作中的交集,并集,差集等操作,那么理解布尔操作也是很容易的。

布尔操作是两个Path之间的运算,主要作用是用一些简单的图形通过一些规则合成一些相对比较复杂,或难以直接得到的图形。

布尔操作有两个方法:

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

两个方法中的返回值用于判断布尔运算是否成功,它们使用方法如下:

// 对 path1 和 path2 执行布尔运算,运算方式由第二个参数指定,运算结果存入到path1中。
path1.op(path2, Path.Op.DIFFERENCE);
    
// 对 path1 和 path2 执行布尔运算,运算方式由第三个参数指定,运算结果存入到path3中。
path3.op(path1, path2, Path.Op.DIFFERENCE)

Path的布尔运算有五种逻辑,如下:

逻辑名称 类比 说明 示意图
DIFFERENCE 差集 Path1中减去Path2后剩下的部分
REVERSE_DIFFERENCE 差集 Path2中减去Path1后剩下的部分
INTERSECT 交集 Path1与Path2相交的部分
UNION 并集 包含全部Path1和Path2
XOR 异或 包含Path1与Path2但不包括两者相交的部分

最后我们尝试用布尔操作绘制一个太极logo:

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(getWidth()/2,getHeight()/2);

        Path path1,path2,path3,path4,path5,path6;
        path1 = new Path();
        path2 = new Path();
        path3 = new Path();
        path4 = new Path();
        path5 = new Path();
        path6 = new Path();

        path2.addRect(-200,-200,0,200, Path.Direction.CW);
        path3.addCircle(0, -100, 100, Path.Direction.CW);
        path4.addCircle(0, 100, 100, Path.Direction.CCW);
        path5.addCircle(0,-100,10, Path.Direction.CCW);
        path6.addCircle(0,100,10, Path.Direction.CCW);

        path1.addCircle(0,0,200, Path.Direction.CW);
        path1.op(path2, Path.Op.INTERSECT);
        path1.op(path3, Path.Op.UNION);
        path1.op(path4, Path.Op.DIFFERENCE);
        path1.op(path5, Path.Op.DIFFERENCE);
        path1.op(path6, Path.Op.UNION);

        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawPath(path1,mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(0,0,200,mPaint);
    }

Path基本讲完

上一篇下一篇

猜你喜欢

热点阅读