Detecting Wether A Point Is Inside Or Outside Of A Raphael.js Shape
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.
Solution 1:
One possible way to dertermine if a point is inside closed path is this:
- Choose coordinates that are definitely outside the shape.
- Make a line from that point to your actual point in question.
- Count, how often the line intersects with the path.
- 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.
Solution 2:
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.
Solution 3:
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.
Post a Comment for "Detecting Wether A Point Is Inside Or Outside Of A Raphael.js Shape"