检测一个点是否在raphael.js形状内部或外部

Question

我有一个raphael.js的形状，我要在上面绘制圆。只有当圆不超出它所绘制的形状的边界时，才希望出现圆。

为了更清楚地说明，这是我不想发生的事情的例子： Example http://img682.imageshack.us/img682/4168/shapeh.png 我希望灰色区域外的圆不出现。如何检测圆是否在灰色形状内或外？

- betamax

Answer 1

判断一个点是否在封闭路径内的一种可能方法如下：

1. 选择明显在形状外部的坐标。
2. 从该点到待判断点之间连一条直线。
3. 计算这条直线与路径的交点数量。
4. 如果交点数量为奇数，则该点在路径内。否则，该点在路径外。

我不知道这是否对您有很大帮助，因为我完全不了解raphael.js。但这是一个可行的几何方法来解决问题。

- selfawaresoup

---

有趣的 :) 如何计算交互作用？有命令还是必须自己做？ - Bakaburg

抱歉，你得自己完成这个任务。我只是描述了数学概念。 - selfawaresoup

我正在使用Photoshop JSX（JavaScript中的Photoshop脚本语言）实现这个。我试图弄清楚一个点是否在路径内，Photoshop为路径提供了SubPath项，它是用于一个路径的向量数组。我正在循环遍历该数组并检查交点数量是否为偶数。我不知道如何在Raphael中实现这一点，但如果您可以单独获取路径的每个向量，则可以执行相同操作。 - José Manuel Blasco

Answer 2

您可以在包含圆形的组（<g>元素）上应用剪辑路径（应定义为您在示例中拥有的灰色形状）。请参见这个示例，了解如何使用剪辑路径。这是来自w3c SVG测试套件的内容。

- Erik Dahlström

---

这个方法可行，但我不得不修改raphael.js的代码才能让它正常工作。Raphael.js只支持矩形，所以我对代码进行了一些微调。更多信息请参见http://github.com/DmitryBaranovskiy/raphael/issues/issue/100/#comment_212698。注意：我知道这是一个可怕的修复方法，但它可以工作，现在这就是我关心的全部。 - betamax

Answer 3

这看起来非常类似于 "如何检测 SVG 形状的点击事件?"。

你只需要在圆形位置上调用 getIntersectionList()，并查看它是否返回大灰色形状。

- Ken

---

谢谢，这看起来是一个可靠的解决方案，但根据参考的博客文章，Firefox/Safari尚未完全支持此功能，而这对我来说是必需的。我应该在最初的帖子中提到这一点。 - betamax

也许我误解了，但我在他的博客文章中尝试了这个例子，在Firefox、Safari和Chrome中都可以正常工作。 - Ken

啊，我只是根据帖子中的文本说它不受Safari或Firefox支持，但这个例子似乎对我也起作用。我得检查一下，因为它似乎比掩码更强大。谢谢！ - betamax

不，这个例子并不能工作（至少在我测试过的Firefox 3.6上不行）。当鼠标移动时，它只是看起来能够显示元素ID，但这并不是通过getIntersectionList()实现的。如果使用Firebug，你会看到一个错误消息，指出getIntersectionList()不被支持。 - jasxun