I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?
Also found isPointInPath but it did not work.
Check in here:
Javascript check Mouse clicked inside the Circle or Polygon
meouw answer works for sure I've test it and guarantee it works.
It seems that there are some other solutions, too that have been upvoted,
maybe you can try them, either
You could either try some canvas frameworks like http://kineticjs.com/ (check events section) which support already clickable elements out of the box or you'll need to write two functions, one which gives you your relative mouse click coordinates inside the canvas element (I used the one described here: https://stackoverflow.com/a/5932203/532102) and after write another function which checks if the returned mouse coordinates intersect with your shape on the canvas.
Related
I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.
Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?
You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.
I am trying to develop a game using the kineticjs canvas elements.
For that an issue occurred and i was advised to take layer.draw.
But i don't know what it does,although it worked.
I tried looking this up ,didn't get any satisfactory results.
And please provide a good example?
Here is a simple explanation
Suppose there is a object named Rectangle. Now i want to add this object to my layer so that it can be drawn there meaning so that it can be visible on screen.For this step i use layer.add. Now I have added a new object i.e. Rectangle to my layer which implies that layer has now been modified. For the Rectangle object to be visible, it must be drawn on the screen.So layer.draw() is written.
Here layer is parent of object Rectangle because Rectangle resides in layer. Therefore for Rectangle to be visible layer must be drawn. Hope you get this.........
I have a simple scene in Raphael JS which contains mainly basic elements, circles, rect, images, etc.
I want to scale up a circle on the mouseover event, which I can do, but I want to add an image over the top of the circle and have that scale as well when the mouse is over the circle OR the image.
Is there a way that I can scale two (or X) items instead of one at a time? Is there some kind of "container" element that I cant find?
Also, when then mouse is over the circle, the event fires, but then when the mouse goes over the image, the mouseout event of the circle fires, how can I stop this so that it looks like the circle and image are one element?
I think what you have to do here is create a transparent circle over the circle/image combination you already have. So, circle,image,circle. The second circle is where you put your event handling. By doing it this way, the top transparent circle will get focus even when it looks like you're hovering over the image.
Stick the lot of them in a set and scale the set in the mouseover. I'd do an example for you, but I'm inherently lazy. If you're really stuck, I'll give it a go.
Hope that makes sense.
I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.
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?
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.
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.
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.