canvas 两个圆相交重叠区域颜色填充_「译」Canvas中的环绕规则 -Winding rules in Canvas...
前言
已经确定了未来一段时间会在Canvas相关领域深耕了,最近刚开始读fabric.js的源码并完成了3w行左右代码的首轮阅读,后续会深入了解背后的原理。在源码的阅读过程中遇到了不少问题,也解决了不少问题,对Canvas绘图的理解也在慢慢加深。后面会有更多关于Canvas绘图的相关文章,可能有译文,也可能有原创,希望大家喜欢。欢迎大家关注我,并希望我的分享能给同处前端的你带来一点点收获
1、什么是缠绕规则?
对于任何图形库来说,路径都是一个非常基本的构建模块。每次你绘制路径的时候,你的浏览器需要确定画布上的这个点是否在另外一个封闭的曲线里。如果这个路径是简单的圆形或长方形还好说,但是当与其他路径相交,或者这个路径本身就嵌套着许多路径的话,就并不能很清晰的显现了。
一个路径中的点应该被如何填充,通常有两种常用方法来规约:“ 非零 ”(‘non-zero’ winding)和“ 奇偶 ”(‘even-odd’ winding)。
1.1 “非零”缠绕(‘non-zero’ winding)
要判断一个在另一个曲线内的点,你需要绘制一条 过该点的直线。然后计算这条直线需要穿过多少路径才能到达这个点。如果穿过的路径绘制方向是顺指针,则 -1,若为逆时针,则 +1。(没穿过则为 0 )
如果相加总和不等于 0 的话,就显示这个点(在路径内)。没明白吗?没关系,让我们来举个栗子:
这是一个由 2 个圆组合成的路径。外圆逆时针方向绘制,内圆顺时针方向绘制。(arc 的最后一个参数 true 或 false)
我们有3个点,并且需要确定它们是否落在路径内。本例中的辅助线是如图中的从左下到右上,但你可以随意做辅助线,只要穿过我们要确认的点就行。
- 点1、和= 1 ≠0 在路径里面,可以填充颜色
- 点2、和= 1 – 1 = 0 在路径外面,不可以填充颜色
- 点3、和= 1 – 1 – 1 = -1 ≠0 在路径里面,可以填充颜色
下面,我们改变一下内圆的环绕方向:
- 点1、和 = 1 ≠ 0 填充
- 点2、和 = 1 + 1 = 2 ≠ 0 填充
- 点3、和 = 1 + 1 + 1 = 3 ≠ 0 填充
1.2 “奇偶”缠绕(‘even-odd’ winding)
如果要判断一个点是否落在路径里面,咱们和刚才一样,再通过这个点画一条线。这次,你只需要简单的数一数这条线到达这个点的时候,一共穿越了几个路径。如果总数为偶数,则这个点不在路径里面; 如果是奇数,则在里面。冗杂环绕的路径可以被忽略。(意思是,穿越到这个点所需的最少穿越路径数)例如:
- 点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
canvas 两个圆相交重叠区域颜色填充_「译」Canvas中的环绕规则 -Winding rules in Canvas...相关推荐
- Visio中绘制两个圆的重叠部分
文件-选项-高级-常规-开发人员模式,勾选后会多出一个开发工具标签,"操作"里面有图像的组合.拆分.合并之类的,合并便可出现两个圆的重叠区域.
- html两个圆相交,Word怎么将两个圆交叉重叠部分填充阴影?
最近有小伙伴向小编请教该如何用Word画出两个交叉的圆形,并把交叉部分用阴影显示.其实画图并不是Word的强项,有很多工具软件可以很方便的完成以上问题,但在Word里我们同样可以完成.看看下面的步骤吧 ...
- java 圆的交点_java求两个圆相交坐标
最近由于项目需要,根据两个圆函数求出相交的坐标.实现代码如下,另感谢两圆求交点算法实现Java代码,虽然他所贡献的代码中存在问题,但仍有借鉴意义. 1.两个圆相交的数学求法 在中学数学中我们知道,一个 ...
- 平面上有两个圆相交,求两个圆相交部分的面积
平面上有两个圆相交,求两个圆相交部分的面积 又学习了一遍算法,感触颇深,也对算法有了更进一步的认识,记录一下这次的学习,希望能帮到有需要的人. 输入:六个参数:第一个圆的圆心坐标,半径,第二个圆的圆心 ...
- java求两个圆相交坐标
最近由于项目需要,根据两个圆函数求出相交的坐标.实现代码如下,另感谢两圆求交点算法实现Java代码,虽然他所贡献的代码中存在问题,但仍有借鉴意义. 1.两个圆相交的数学求法 在中学数学中我们知道,一个 ...
- 算法分析课设(一)平面上有两个圆相交,求两个圆相交部分的面积
写出算法的文字描述 第一步:输入两个圆的参数 x1. y1. r1. x2. y2. r2. 第二步:计算两圆的距离d,然后分以下四种情况判断: 1.相离或相切.若d>=(r1+r2),则 s= ...
- 区域颜色填充-四连通种子填充算法
首先确定封闭区域内的一个像素,称为种子点.将种子点率先引入栈中,并重复以下3个步骤:1.栈顶像素出栈:2.将出栈的像素填充上目标颜色:3.根据左上右下的顺序检查周围的像素,如果不为边缘且还未入栈则将该 ...
- 两个iphone怎么大量传照片_「唯物」传个视频到 iPhone,有了新方法
出个难题:老婆用 iPhone 刚录的视频,想传到老公 Android 手机上,或者反方向老公传给老婆,有什么简便方法? 以下两个,可能是普通人最容易想到的: 有网的话,通过云存储中转:iPhone ...
- 区域银行的数字「进化论」
言犀VTM数字员工可以看作是区域性银行"量体裁衣" 数字化建设的代表,不论是基于自身强交互形态,或者是多端适应力,都具备极强的可推广性.区域性银行的数字化转型需要符合区域性的业务特 ...
最新文章
- SnackbarUtilDemo【Snackbar的封装类】
- python批量提取word指定内容到excel_(转)用python批量读取word文档并整理关键信息到excel表格...
- 如何让签到成为提升用户活跃度的利器
- 稀疏表示介绍(中)、(下)
- JS判断页面控件是否可用
- css层叠上下文和层叠顺序
- 基于modbus协议的工业自动化网络规范_工控学堂:解读Modbus通讯协议「宜收藏」...
- boost::contract模块实现check宏的测试程序
- SageMaker使用托管容器训练本地网络模型
- android 布局管理器,【Android开发】布局管理器-表格布局
- 计算机基础:存储系统知识笔记(一)
- 包含对流环热,热流边界,等温边界的稳态热传导方程的FEM求解。
- Express学习笔记(基本使用,中间件,模块化路由,请求处理)
- linux消息队列编程实例
- 【版本控制工具】svn服务器、客户端安装配置及eclipse的svn检出
- 整站下载工具 webzip
- java经典算法(二)---zws
- [Java教程 00] 计算机基础
- PDF文件添加水印怎么添加?分享两种加水印方法
- 如何设置条码标签的打印数量
热门文章
- UI素材资源|Material风格的插图,有品位的素材
- speedtest命令行linux,Linux或者Mac下命令行speedtest测试网络速度
- java mysql查询语句_Mysql查询语句执行过程
- 如何使用模板生成多个页面_Divi不再只是页面构建器。 使用主题生成器,可以完全设计整个网站。...
- Go语言学习Day01
- Containerd 的前世今生和级入门教程
- dsge模型难做吗_百度Seo优化好做吗,现在做是不是越来越难做?
- python基础布尔和None(三)
- mybatis--一对一、一对多、多对多(七)
- java写龟兔赛跑_有关JAVA编写龟兔赛跑的游戏的问题。求助……