在开发canvas时,你知道什么是非零环绕原则(nonzZero rule) 吗?
在 Canvas 绘图中,非零环绕规则(non-zero winding rule 或 non-zero rule)是用于确定一个点是否位于路径内部的算法。它主要用于fill()
方法,决定哪些区域需要填充颜色。
非零环绕规则的工作原理如下:
-
从需要判断的点出发,向任意方向画一条射线。 这条射线不应该穿过任何路径的顶点。
-
为路径的每一段线段指定一个方向值(winding number)。 如果线段从射线的左侧穿过到右侧,则 winding number 加 1;如果线段从射线的右侧穿过到左侧,则 winding number 减 1。
-
将所有穿过射线的线段的 winding number 相加。
-
如果 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 图形至关重要。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了