前言
已经确定了未来一段时间会在Canvas相关领域深耕了,最近刚开始读fabric.js的源码并完成了3w行左右代码的首轮阅读,后续会深入了解背后的原理。在源码的阅读过程中遇到了不少问题,也解决了不少问题,对Canvas绘图的理解也在慢慢加深。后面会有更多关于Canvas绘图的相关文章,可能有译文,也可能有原创,希望大家喜欢。欢迎大家关注我,并希望我的分享能给同处前端的你带来一点点收获
1、什么是缠绕规则?
对于任何图形库来说,路径都是一个非常基本的构建模块。每次你绘制路径的时候,你的浏览器需要确定画布上的这个点是否在另外一个封闭的曲线里。如果这个路径是简单的圆形或长方形还好说,但是当与其他路径相交,或者这个路径本身就嵌套着许多路径的话,就并不能很清晰的显现了。
一个路径中的点应该被如何填充,通常有两种常用方法来规约:“ 非零 ”(‘non-zero’ winding)和“ 奇偶 ”(‘even-odd’ winding)。
1.1 “非零”缠绕(‘non-zero’ winding)
要判断一个在另一个曲线内的点,你需要绘制一条 过该点的直线。然后计算这条直线需要穿过多少路径才能到达这个点。如果穿过的路径绘制方向是顺指针,则 -1,若为逆时针,则 +1。(没穿过则为 0 )
如果相加总和不等于 0 的话,就显示这个点(在路径内)。没明白吗?没关系,让我们来举个栗子:
![22743efbb48323278dc42c074ffd68b4.png](https://i-blog.csdnimg.cn/blog_migrate/7cdbab3e0a0029ef72214ad4568aaa11.jpeg)
这是一个由 2 个圆组合成的路径。外圆逆时针方向绘制,内圆顺时针方向绘制。(arc 的最后一个参数 true 或 false)
我们有3个点,并且需要确定它们是否落在路径内。本例中的辅助线是如图中的从左下到右上,但你可以随意做辅助线,只要穿过我们要确认的点就行。
- 点1、和= 1 ≠0 在路径里面,可以填充颜色
- 点2、和= 1 – 1 = 0 在路径外面,不可以填充颜色
- 点3、和= 1 – 1 – 1 = -1 ≠0 在路径里面,可以填充颜色
下面,我们改变一下内圆的环绕方向:
![16df78a67187dc050bf36e3ffaa94d40.png](https://i-blog.csdnimg.cn/blog_migrate/b26cd205664126e0de8ae3cee02624bf.jpeg)
- 点1、和 = 1 ≠ 0 填充
- 点2、和 = 1 + 1 = 2 ≠ 0 填充
- 点3、和 = 1 + 1 + 1 = 3 ≠ 0 填充
1.2 “奇偶”缠绕(‘even-odd’ winding)
如果要判断一个点是否落在路径里面,咱们和刚才一样,再通过这个点画一条线。这次,你只需要简单的数一数这条线到达这个点的时候,一共穿越了几个路径。如果总数为偶数,则这个点不在路径里面; 如果是奇数,则在里面。冗杂环绕的路径可以被忽略。(意思是,穿越到这个点所需的最少穿越路径数)例如:
![3a874db68def3c3eb031d133de5785f7.png](https://i-blog.csdnimg.cn/blog_migrate/c8456a742779abfc22bd0f047c276f02.jpeg)
- 点1、和 = 1,奇数,在路径里
- 点2、和 = 1 + 1 = 2,偶数,不在路径里
- 点3、和 = 1 + 1 + 1 = 3,奇数,在路径里
“奇偶”缠绕规则相对来说更容易被我们掌握和使用,因为我们在绘制时很难记住之前的缠绕方向。举个栗子,就跟上面图片一样,你想用一个大圆,一个小圆做一个类似于甜甜圈一样的圆环,如果你采用了“非零”缠绕规则去绘制,那么你要做的是改变里面小圆的绘制方向。但是如果你使用了“奇偶”规则,那么你只需要在路径内继续绘制一个路径,叠加后变成偶数,就会绘制成功了。
2、兼容情况
WebKit 和 Mozilla 内核的底层图形 API 已经支持了缠绕规则,所以很容易使用。你可以下载一个 nightly Firefox, WebKit 或 Chromium 构建和体验新功能。特别感谢 Mozilla 和 WebKit 的开发人员对这个 API 的快速支持!
参考资料:
https://www.zhangxinxu.com/wordpress/2018/10/nonzero-evenodd-fill-mode-rule/
http://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/
http://blog.hooperui.com/%E8%AF%91-canvas-%E7%9A%84%E7%8E%AF%E7%BB%95%E8%A7%84%E5%88%99-winding-rules-canvas