检测一个点是在 raphael.js 形状的内部还是外部答案

【问题标题】：Detecting wether a point is inside or outside of a raphael.js shape检测一个点是在 raphael.js 形状的内部还是外部
【发布时间】：2011-02-09 04:39:18
【问题描述】：

我有一个 raphael.js 形状，我在上面绘制圆圈。我只想在圆圈没有超出要绘制到的形状的边界时出现一个圆圈。

为了更清楚地说明这一点，以下是我不希望发生的事情的示例：

我希望灰色区域之外的圆圈不出现。我如何检测圆圈是在灰色形状的内部还是外部？

【问题讨论】：

【解决方案1】：

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

我不知道这是否对您有很大帮助，因为我根本不了解 raphael.js。但这是解决问题的有效几何方法。

【讨论】：

有趣 :) 如何计算交互？有命令还是必须自己做？
对不起，你必须自己做。我只是描述了数学概念。
我在 Photoshop JSX（javascript 中的 Photoshop 脚本语言）中实现了这一点。我试图确定一个点是否在路径内，Photoshop 为我提供了路径的子路径项，路径是用于一条路径的向量数组。我正在遍历该数组并检查交叉点的数量是否为偶数。我不知道如何在 Raphael 中实现 htis，但是如果您可以单独获取路径的每个向量，您也可以这样做。

【解决方案2】：

您可以在包含圆圈的组（<g> 元素）上应用剪辑路径（应定义为示例中的灰色形状）。

请参阅w3c SVG testsuite 中的this example，了解如何使用剪辑路径。

【讨论】：

这行得通，但是我必须破解 raphael.js 才能很好地使用它。 Raphael.js 仅支持矩形，因此我对代码进行了一些调整。有关更多信息，请参阅github.com/DmitryBaranovskiy/raphael/issues/issue/100/…。注意。我知道这是一个可怕的解决方案，但它确实有效，现在这就是我所关心的。

【解决方案3】：

这看起来与“Hit-testing SVG shapes?”非常相似。

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

【讨论】：

谢谢，这似乎是一个可靠的解决方案，但根据引用的博客文章，Firefox / Safari 尚未正确支持这对我来说是必需的。我应该在我的原始帖子中提到这一点。
也许我理解错了，但我尝试了他博客文章中的示例，它在 Firefox、Safari 和 Chrome 中运行良好。
啊，我只是看帖子中的文字，说 Safari 或 Firefox 不支持它，但这个例子似乎也对我有用。我将不得不检查一下，因为它似乎比面具更强大。谢谢！
不，该示例不起作用（至少在我测试过的 Firefox 3.6 上）。它只是似乎在鼠标移动时通过显示元素 ID 来工作，但 getIntersectionList() 没有实现这一点。使用 Firebug，您将看到不支持 getIntersectionList() 的错误消息。