I am trying to do a drag & drop on a number of rectangle objects that are draggable.
There is another set of rectangle objects acting as container for dropping objects - I have added them to a group.
How can I detect the collision between a group/or any of the box objects(stored in array) - with the draggable elements.
Everything is in a single layer.
Also when the draggable element is placed over the group box, it does not listen to the mouse over event (which is assigned to it) - is there a way to delegate the events(mouseover, mouseout) to the low level object when another element drags over it.
box.on("mouseover",
function(e) {
console.log("mouseover");});
Thanks.
I believe that KineticJS doesn't support it's own collision detection so you would have to write your own function. These 2 SO questions are good starting points:
Dragging collisions
HTML5 / kineticJS getIntersection function implementation
Referencing the answer to this question: How to start mouseover event while dragging
We see that we can follow similarly on KineticJS, and that the solution goes hand in hand with creating your own collision detection function. The only difference here is instead of calculating the coordinates for hit detection on divs, you can calculate the 4 corner point coordinates of each shape (in your case, a rectangle). Also, instead of writing your own drag functions, you can use getMousePos() and the events: dragstart, dragend, and mousemove to rewrite the code from the fiddle example and cater to your kinetic rectangles.
Related
I'd like to create an input that allows the user to drag a dot around a box and will output the 2D coordinates of that dot inside the box. This will be used to drive pan and tilt values. The picture below shows the functionality I'd like from another application:
I'd like to use this in a web application with HTML and Javascript. The center (0,0) coordinate should be in the middle of the box (where the crosshairs meet in the example above). May I have some guidance as to how to start going about creating this type of thing?
This can be done in pure HTML and JS, although this problem is not a simple one so I'll just point you in the right direction.
First create a container (div) to represent the 2D grid, and dot using HTML/CSS. You can calculate the co-ordinates of the dot in relation to the container using HTMLElement.offsetTop() (although this will be co-ordinates from the top-left of the container, so you will need to do some maths if you want it to be from a different point).
For the actual dragging to happen, you will need to add mouse events (would be easiest to use jQuery for this), such as mousedown, mousemove and mouseup.
Your mousedown event will check that the mouse is over the dot when pressed, and if so, set a 'dragging' flag to true.
Your mousemove will check the cursor position whenever moved (if dragging === true), and use the mouse position to calculate co-ordinates in relation to the box (using the mouse's position in relation to the box position, which will require some maths skills). You can also alter the position of the dot to follow your mouse with CSS (if the dot has position:absolute style applied, you will set the top and left properties using HTMLElement.style.
Finally, mouseup will set the 'dragging' flag to false.
Like I said, this will take some time to implement and you may not do it exactly like this, but here's a basic example.
I have code that draws a square and plots points inside a canvas element. I use a d3.drag function to drag the square separate from the points and a d3.zoom function to zoom on BOTH the points and the square as well as pan both. The problem I'm having is two-fold:
Once zoomed, I sort of lose the ability to drag the square. Sort of in the sense that if you click around enough (typically the original spot of the square, not current), you can grab the square again.
Once I am able to grab the square again, the zoom renders to the very original zoom layer, not the current zoom.
Here is a jsFiddle
I found this answer that recommends adding:
square.on("mousedown", function() { d3.event.stopPropagation(); });
but have not had any luck.
TIA
I'm trying to learn how to use box2dweb and would like to have an object (a circle in this case) follow the mouse at all times, not just when dragging. The idea being it could be used for an air hockey type game where the circle is your paddle.
However circle doesn't attach itself properly to the mouse, instead it swings around the point where the mouse cursor is and behaves more like a distance joint would if one of the objects were the mouse cursor.
I can't tell what I'm doing wrong but I'm still new to this so any help would be appreciated.
You can see the code I have so far (based on the demo code) here: http://jsbin.com/ejafoj/1/edit
Managed to figure this out, my problem was a misunderstanding of the difference between the mousejoint definition target and the mousejoint target. I needed to set the definition target to the center of the ball and not the mouse cursor. Once I did that it worked perfectly.
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.
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.