CODEWITHSUNDEEP
javascriptsvgcollision-detectionraphael
betamax
betamax

Reputation: 14041

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.

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?

Upvotes: 3

Views: 5060

Answers (3)

Ken
Ken

Reputation: 766

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.

Upvotes: 1

Erik Dahlström
Erik Dahlström

Reputation: 60966

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.

Upvotes: 3

selfawaresoup
selfawaresoup

Reputation: 15832

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.

Upvotes: 6

Related Questions