canvas判断点是否在路径内

应用场景

我们的项目中有个功能是，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，所以实在外面

isPointInStroke检测某点是否在路径的描边线上

另外Canvas 2D API 还有个用于检测某点是否在路径的描边线上的方法：isPointInStroke()。
boolean ctx.isPointInStroke(x, y);

返回值：一个布尔值，当这个点在路径的描边线上，则返回true，否则返回false。

 针对isPointInStroke和isPointInPath的对比请看下图：（需要注意的是stroke或者fill都不是必须的，这样能提高判断的性能）

  

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