亲宝软件园·资讯

展开

canvas判断点是否在路径内

方帅 人气:2

应用场景

我们的项目中有个功能是,canvas上的某个图片选中后可以再这个图片上用鼠标拖拽绘制画笔线条。

当然绘制的边界要控制在图片大小范围内的,那么鼠标是可以随意动的,怎么能控制只在图片上的时候才绘制呢?

Canvas 2D API 有直接提供的方法:CanvasRenderingContext2D.isPointInPath() 用于判断在当前路径中是否包含检测点的方法。

isPointInPath介绍

语法:

boolean ctx.isPointInPath(x, y);
boolean ctx.isPointInPath(x, y, fillRule);

boolean ctx.isPointInPath(path, x, y);
boolean ctx.isPointInPath(path, x, y, fillRule);

 

参数:

x 检测点的X坐标  
y 检测点的Y坐标  
fillRule 用来决定点在路径内还是在路径外的算法。
  • "nonzero": 非零环绕规则,缺省值。
  • "evenodd": 奇偶环绕原则 。

返回值:

一个Boolean值,当检测点包含在当前或指定的路径内,返回 true;否则返回 false。

 非零环绕原则

规则是从点引出任意一条射线,与路径交点结果计算,如果计数不为0,那么此点就在路径范围里面,在调用fill()方法时,浏览器就会对其进行填充。如果最终值是0,那么此区域就不在路径范围内,浏览器就不会对其进行填充。

 

 首先,我们得给图形确定一条路径,只要“一笔画”并且“不走重复路线”就可以了。如图,标出的是其中的一种路径方向。我们先假定路径的正方向(逆时针)为1,那么反方向(顺时针)就是其相反数-1。(整个定义可以反过来的,正方向为顺时针,反方向为逆时针)

接下来,我们就来判断了。

点P1中引出的任意一条射线L1,与一条正方向路径相交,那么我们就给计数器+1,结果为+1,所以点P1在外面。

点P2中引出的任意一条射线L2,与两条子路径的正方向相交,计数器+2,结果为+2,所以点P2在外面。

点P3中引出的任意一条射线L3,与两条子路径相交,但是其中有一条的反方向,计数器+1-1,结果为0,所以点P3在里面。

点P4中引出的任意一条射线L4,与一条子路径相交,路径为反方向,计数器-1,结果为-1,所以点P4在外面。

只要结果不为0,判断的点就在区域的外面。结果为0,点在区域里面(绿色区域)

奇偶环绕原则

奇偶环绕原则理解为:

平面内的任何一点P,引出一条射线,注意不要经过多边形的顶点,如果射线与多边形的交点的个数为奇数,则点P在多边形的内部;如果交点的个数为偶数,则点P在多边形的外部。

 

 我们用这个方法判断的结果是:

P1,P4与路径交点为1,所以是在里面

P2,P3与路径交点为2,所以实在外面



参考:https://www.jianshu.com/p/ce72c4402f7a

加载全部内容

相关教程
猜你喜欢
用户评论