检测点是在 raphael.js 形状的内部还是外部

发布于 2024-08-29 10:01:25 字数 299 浏览 4 评论 0原文

我有一个 raphael.js 形状,我正在其上绘制圆圈。我只希望当圆没有超出其所绘制的形状的边界时出现一个圆。

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

示例http://img682.imageshack.us/img682/4168/shapeh.png

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

I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to.

To make this more clear, here is an example of what I do not want to happen:

Example http://img682.imageshack.us/img682/4168/shapeh.png

I want the circles outside of the grey area not to appear. How would I detect wether a circle is inside or outside of the grey shape?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

简美 2024-09-05 10:01:25

确定点是否位于闭合路径内部的一种可能方法是:

  1. 选择绝对位于形状外部的坐标。
  2. 从该点到您的实际问题点画一条线。
  3. 计算直线与路径相交的次数。
  4. 如果交叉点的数量是奇数,那么你的点就在里面。如果是偶数,则该点在外面。

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

One possible way to dertermine if a point is inside closed path is this:

  1. Choose coordinates that are definitely outside the shape.
  2. Make a line from that point to your actual point in question.
  3. Count, how often the line intersects with the path.
  4. if the number of intersections is odd, then your point is inside. If it's even, the point is outside.

I don't know if that help you very much since I don't know raphael.js at all. But it's a working geometrical approach to the problem.

π浅易 2024-09-05 10:01:25

您可以只在包含圆圈的组( 元素)上应用剪辑路径(应定义为示例中的灰色形状)。

请参阅此示例来自 w3c SVG 测试套件 了解如何使用剪辑路径。

You could just apply a clip-path (that should be defined to be the grey shape you have in your example) on a group (<g> element) containing the circles.

See this example from the w3c SVG testsuite for how to use clip-paths.

演多会厌 2024-09-05 10:01:25

这看起来与“命中测试 SVG 形状?”非常相似。

您只需要在圆的位置上调用 getIntersectionList() ,然后查看它是否返回大的灰色形状。

This looks very similar to "Hit-testing SVG shapes?".

You'll just need to call getIntersectionList() on the circle's position, and see if it returns the big gray shape.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文