检测点是在 raphael.js 形状的内部还是外部
我有一个 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
确定点是否位于闭合路径内部的一种可能方法是:
我不知道这是否对你有很大帮助,因为我根本不了解 raphael.js。但这是解决问题的有效几何方法。
One possible way to dertermine if a point is inside closed path is this:
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.
您可以只在包含圆圈的组(
元素)上应用剪辑路径(应定义为示例中的灰色形状)。请参阅此示例来自 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.
这看起来与“命中测试 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.