搞懂SVG/Canvas中nonzero和evenodd填充规则

栏目: 后端 · 前端 · 发布时间: 6年前

内容简介:这篇文章发布于 2018年10月3日,星期三,18:58,归类于Canvas相关,SVG相关。 阅读 29 次, 今日 25 次byzhangxinxu from本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。

这篇文章发布于 2018年10月3日,星期三,18:58,归类于Canvas相关,SVG相关。 阅读 29 次, 今日 25 次

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8043

本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。

一、填充有两种规则

搞懂SVG/Canvas中nonzero和evenodd填充规则

只要是路径填充,都有两种规则,nonzero和evenodd,无论是SVG中的路径填充,还是Canvas中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。

换句胡说,这是超越各种语言,普世通用的技能点。

下面,看看我能不能用足够精简的语言,尽可能让大家都搞懂这两种路径填充规则。

如果我们用3个点,连成一个三角形,则这两种填充规则没什么区别,如下对比(Canvas语法举例,JS实时渲染,如果无效果,请访问原文)。

nonzero(默认) evenodd

如果是两个三角形,并且发生重叠,差异就出现了,如下:

nonzero(默认) evenodd

究竟是如何作用的呢?且看~

二、一切都是交叉点们的选择

填充规则的关键,就是确定复杂路径构成的图形,哪些是内部,哪些是外部。内部则填充,外部则透明。

“nonzero规则”顾名思意就是“非零规则”,用通俗的话讲,就算计算某些东西是不是 0 ,如果不是 0 则内部,填充;如果是 0 则外部,不填充。

“evenodd规则”顾名思意就是“奇偶规则”,用通俗的话讲,就算计算某些东西是不是奇数,如果是是奇数则内部,填充;如果是偶数则外部,不填充。

下面关键来了,这里的“计算某些东西”究竟计算的是什么东西呢?

nonzero规则和evenodd规则计算的东西还不一样,nonzero是计算顺时针逆时针数量,evenodd是交叉路径数量。

为了示意更加直观,我们可以把本文示意的三角路径方向和序号标记下,如下表:

nonzero(默认) evenodd

接下来,高能来了……

我们要判断某一个区域是路径内还是路径外,很简单,在这个区域内任意找一个点,然后以这个点为起点,发射一条无限长的射线,然后——

  • 对于nonzero规则:起始值为0,射线会和路径相交,如果路径方向和射线方向形成的是顺时针方向则+1,如果是逆时针方向则-1,最后如果数值为0,则是路径的外部;如果不是0,则是路径的内部,因此被称为“非0规则”。

    一图胜千言:

    搞懂SVG/Canvas中nonzero和evenodd填充规则

    例如上图点A,我们随便发出一条射线,结果经过了路径5和路径2,我们顺着路径前进方向和射线前进方向,可以看到,合并后的运动方向都是逆时针,逆时针方向-1,因此,最后计算值是-2,不是0,因此,是内部,fill时候可以被填充。

    再看外部的例子,一图胜千言+1:

    搞懂SVG/Canvas中nonzero和evenodd填充规则

    点B再发出一条射线,经过两条路径片段,为路径2和路径3,我们顺着路径前进方向和射线前进方向,可以看到,合并后的运动方向一个是逆时针,-1,一个是顺时针,+1,因此,最后的计算值是0,是外部,因此,不被填充。

  • 对于evenodd规则:起始值为0,射线会和路径相交,每交叉一条路径,我们计数就+1,最后看我们的总计算数值,如果是奇数,则认为是路径内部,如果是偶数,则认为是路径外部。

    一图胜千言+2:

    搞懂SVG/Canvas中nonzero和evenodd填充规则

    例如上图点A,我们随便发出一条射线,结果经过了路径5和路径2,交叉的路径个数为2,是偶数,因此,属于路径外,不填充。

    一图胜千言+3:

    搞懂SVG/Canvas中nonzero和evenodd填充规则

    点B再发出一条射线,经过路径片段路径2和路径3,交叉的路径个数为2,是偶数,因此,也属于路径外,不填充。

    一图胜千言+4:

    搞懂SVG/Canvas中nonzero和evenodd填充规则

    最后这个点C,发出的射线总共和3个路径交叉,是奇数。因此,属于路径内,填充。

三、啦啦啦,结束语

不知大家搞懂没?

搞懂SVG/Canvas中nonzero和evenodd填充规则

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8043

(本篇完)


以上所述就是小编给大家介绍的《搞懂SVG/Canvas中nonzero和evenodd填充规则》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法竞赛入门经典

算法竞赛入门经典

刘汝佳、陈锋 / 2012-10 / 52.80元

《算法竞赛入门经典:训练指南》是《算法竞赛入门经典》的重要补充,旨在补充原书中没有涉及或者讲解得不够详细的内容,从而构建一个较完整的知识体系,并且用大量有针对性的题目,让抽象复杂的算法和数学具体化、实用化。《算法竞赛入门经典:训练指南》共6章,分别为算法设计基础、数学基础、实用数据结构、几何问题、图论算法与模型和更多算法专题,全书通过近200道例题深入浅出地介绍了上述领域的各个知识点、经典思维方式......一起来看看 《算法竞赛入门经典》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具