在开发canvas时,你知道什么是非零环绕原则(nonzZero rule) 吗?

在 Canvas 绘图中,非零环绕规则(non-zero winding rule 或 non-zero rule)是用于确定一个点是否位于路径内部的算法。它主要用于fill()方法,决定哪些区域需要填充颜色。

非零环绕规则的工作原理如下:

  1. 从需要判断的点出发,向任意方向画一条射线。 这条射线不应该穿过任何路径的顶点。

  2. 为路径的每一段线段指定一个方向值(winding number)。 如果线段从射线的左侧穿过到右侧,则 winding number 加 1;如果线段从射线的右侧穿过到左侧,则 winding number 减 1。

  3. 将所有穿过射线的线段的 winding number 相加。

  4. 如果 winding number 的总和不为零,则该点位于路径内部,会被填充;如果 winding number 的总和为零,则该点位于路径外部,不会被填充。

举例说明:

想象一下一个五角星。如果应用非零环绕规则,星星的中心点会被填充,因为围绕中心点的路径的 winding number 总和不为零。即使中心点不在任何一个三角形的内部,它仍然被认为在整个路径的内部。

再想象一个有两个同心圆的图形,外圆顺时针绘制,内圆逆时针绘制。如果应用非零环绕规则,两个圆之间的区域会被填充。这是因为从该区域内的任何一点引出的射线都会穿过外圆(+1)和内圆(+1),winding number 总和为 2,不为零。而内圆内部的区域不会被填充,因为射线会穿过外圆(+1)和内圆(-1),winding number 总和为 0。

与 even-odd 规则的区别:

Canvas 还支持另一种规则,称为 even-odd 规则 (奇偶规则)。even-odd 规则只计算射线穿过路径的次数,不考虑方向。如果穿过次数为奇数,则该点位于路径内部;如果穿过次数为偶数,则该点位于路径外部。

在 Canvas API 中的使用:

默认情况下,Canvas 使用非零环绕规则。你可以使用 ctx.fill() 方法进行填充。 如果你想使用 even-odd 规则,可以使用 ctx.fill('evenodd')

总而言之,非零环绕规则提供了一种更灵活的方式来定义复杂的填充区域,特别是在处理自相交路径时。理解非零环绕规则对于创建复杂的 Canvas 图形至关重要。

posted @   王铁柱6  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示