javascript - 检查 html Canvas 上特定区域的点位置

Question

我想检查点(x，y)是否位于 Canvas 上的特定区域。例如，如果我在 html Canvas 上有一个 100X100 的区域，那么我想找出一个点 (x, y) 是否位于该区域内或该区域外。 此检测将使用 javascript 和 jquery 完成。 谢谢。

Answer 1

取决于您需要它的用例:

1. 鼠标悬停/单击:只要您的 Canvas 是唯一具有移动元素的东西，并且您不需要对 safari/iOS 的支持，一个好的老式图像 map 实际上可以完成这项工作。 (使用图像贴图拉伸(stretch) Canvas 尺寸的 1px*1px 透明 gif)

2. 任意点(包括鼠标):使用公式计算该点是在多边形内部还是外部。下面的脚本(虽然不是我写的)解决了这个问题:

   //+ Jonas Raoni Soares Silva
   //@ http://jsfromhell.com/math/is-point-in-poly [rev. #0]
   
   function isPointInPoly(poly, pt){
       for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
           ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
           && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
           && (c = !c);
       return c;
   }
   

   在他的页面上，乔纳斯还给出了如何使用它的示例。基本上，poly 是包含多边形点的对象数组，而 pt 是包含要测试的点的对象:

   var polygon = [
       {x: 0, y: 0},
       {x: 0, y: length},
       {x: length, y: 10},
       {x: -length, y: -10},
       {x: 0, y: -length},
       {x: 0, y: 0}
   ];
   
   var testpoint= {x: 1, y:2};
   if(isPointInPoly(polygon,testpoint)) { /* do something */ }
   

   如果它用于鼠标位置，您应该将整个事件绑定(bind)到 mousemove，它可以在 mouseenter/mouseleave 上再次启用/禁用 - Canvas 节点的所有事件

3. 任意点:使用 Canvas 函数 isPointInPath()，如下所述:http://canvas.quaese.de/index.php?nav=6,42&doc_id=31尽管据我所知，这仅适用于 Canvas 上只有一条路径的情况(您可以使用多个 Canvas ) - 或者重新绘制每个多边形并在执行此操作时对其进行测试。

我个人更喜欢选项 2。如果您需要有关获取鼠标坐标的进一步帮助，Google 搜索应该会在 stackoverflow 上为您提供正确的页面(或参阅右侧的“相关”部分)