3

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?

betamax
  • 13,431
  • 9
  • 38
  • 55

3 Answers3

5

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.

selfawaresoup
  • 15,473
  • 7
  • 36
  • 47
  • interesting :) how to compute the interactions? Is there a command or you have to do it yourself? – Bakaburg Jun 17 '11 at 08:55
  • Sorry, you'll have to do this yourself. I just described the mathematical concept. – selfawaresoup Jun 20 '11 at 09:11
  • I'm implementing this in a Photoshop JSX (Photoshop scripting language in javascript). I'm trying to figure out if a point is inside a path, Photoshop gives me SubPath items for a Path that is an array of the vectors used for one path. I'm looping through that array and checking if the number of intersection is an even number. I don't know how to implement htis in Raphael, but if you can get each vector of the path individually you can do the same. – José Manuel Blasco Aug 11 '20 at 18:36
3

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • This worked, however I had to hack raphael.js to play nice with it. Raphael.js only supported rectangles so I added in a little tweak to the code. See http://github.com/DmitryBaranovskiy/raphael/issues/issue/100/#comment_212698 for more information. NB. I know this is a horrible fix but it works and for now that is all I am concerned about. – betamax Apr 18 '10 at 15:06
1

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.

Community
  • 1
  • 1
Ken
  • 756
  • 4
  • 7
  • Thanks this seems like a solid solution but, according to the blog post that was referenced, this is not yet supported properly by Firefox / Safari which is a requirement for me. I should have mentioned this in my original post. – betamax Apr 18 '10 at 15:05
  • Perhaps I'm misunderstanding, but I tried the example on his blog post and it worked just fine in Firefox, Safari, and Chrome. – Ken Apr 18 '10 at 16:05
  • Ah, I was just going by the text in the post that said it is not supported by Safari or Firefox but the example seems to be working for me too. I will have to check this out because it seems a bit more robust than a mask. Thanks! – betamax Apr 18 '10 at 23:04
  • 1
    No, the example isn't working (at least on Firefox 3.6 which I tested upon). It just **seems** to work by showing element IDs when the mouse is moving around, but that is not achieved by `getIntersectionList()`. With Firebug you will see an error message that `getIntersectionList()` is not supported. – jasxun Apr 21 '11 at 21:21