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

Posted by betamax on Stack Overflow See other posts from Stack Overflow or by betamax
Published on 2010-04-17T16:55:30Z Indexed on 2010/04/17 17:03 UTC
Read the original article Hit count: 669

Filed under:

raphael

|

raphael-js

|

JavaScript

|

svg

|

collision-detection

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

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?

© Stack Overflow or respective owner

Related posts about raphael

Raphael js text positioning: centering text in a circle

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey everyone, I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of… >>> More
Target iframe Raphael Js

as seen on Stack Overflow - Search for 'Stack Overflow'
Ive been trying to target iframe using Raphael JS heres some sample code var c = paper.circle(10, 10, 10); c.attr({href: "http://google.com/", target: "top"}); v var t = paper.text(250, 50, "Raphaël\nkicks\nbutt!"); t.attr({href: "http://google.com/", target: "_blank"}); Also..cant get href to… >>> More
SVG animation along path with Raphael

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rather interesting issue with SVG animation. I am animating along a circular path using Raphael obj = canvas.circle(x, y, size); path = canvas.circlePath(x, y, radius); path = canvas.path(path); //generate path from path value string obj… >>> More
Detecting wether a point is inside or outside of a raphael.js shape

as seen on Stack Overflow - Search for 'Stack Overflow'
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… >>> More
Attach text on path in Raphaël?

as seen on Stack Overflow - Search for 'Stack Overflow'
Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it. >>> More

Related posts about raphael-js

Raphael js text positioning: centering text in a circle

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey everyone, I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of… >>> More
Detecting wether a point is inside or outside of a raphael.js shape

as seen on Stack Overflow - Search for 'Stack Overflow'
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… >>> More
Can RaphaelJS be object aware?

as seen on Stack Overflow - Search for 'Stack Overflow'
In the course of trying to figure out whether it's possible to contain text within the boundaries of a rectangle using RaphaelJS (and without doing what would seem to be a lot of work), I came across this question (and its answer) which intrigued me. I haven't seen--either before or since reading… >>> More
Raphael js library: problems with animateAlong in IE7

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there, I'm having trouble making a simple shape move along a path in IE7 (the only version of IE I tried, actually). The following code works fine in chrome and firefox, but not IE. I couldn't find an obvious reason, has anybody seen something similar? canvas.path(rPath.path).attr("stroke", "blue"); var… >>> More
Illustrator CS4: SVG Export error "Transforms are Expanded"??

as seen on Super User - Search for 'Super User'
I get the following error when trying to save my image to SVG (via "Save Copy As"): Transforms are expanded. When I try to load the SVG in another program, all I get is a blank canvas. I ultimately want the path data to feed into RaphaelJS, but the path data that I got by clicking on the Show Code… >>> More