Detecting wether a point is inside or outside of a raphael.js shape

Question

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:

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?

Answer 1

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.

Answer 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.

Answer 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.