Here I have a code sample related to moving an element on canvas. To move a circle to an other position on canvas, the below code is checking whether the mousedown event got triggered on the circle element itself or not so that further dragging can be initiated using mousemove. But I dont understand the logic that's been used to know whether or not the mouse is doubleclicked on the correct circle to drag it.
// start dragging
function DragStart(e) {
//coordinates of mouse from mousedown event e{x,y}
e = MousePos(e);
var dx, dy;
//initialCirclePosition is the centre (x,y) of the circle
dx = initialCiclePosition.x - e.x;
dy = initialCiclePosition.y - e.y;
if ((dx * dx) + (dy * dy) < circleRadius * circleRadius) {
//Yes, user is trying to move the circle only
........
}
}
When user holds the mouse control on any element(by clicking on it), mousedown event occurs, Then, when he tries to drag the element, mousemove event occurs. But, before letting mousemove gets triggered, we should find whether or not the user is trying to drag the right element (circle here). If you see the code above, the logic in if() statement was used to check that. I am unable to understand that logic and that's the question is about. Thanks.
An explanation of what your code is testing.
This part of your code...
...uses the Pythagorean Theorem to mathematically test if the mouse is inside the circumference of a circle.
(dx * dx) + (dy * dy)
measures the distance between the circle centerpoint and the mouse. It actually measures the centerpoint-to-mouse distance squared, but sinceMath.sqrt
is an expensive operation, we just compare the mouse distance squared to the circle radius squared. We get the same result but avoid the expensiveMath.sqrt
.Here's a tutorial on determining distances using the Pythagorean Theorem:
https://www.youtube.com/watch?v=We3LG8pK-LU
We can't tell why the test is being done without seeing more of your code.
But, but presumably if the mouse is inside the circle you are deciding that the user intends to drag the circle.
And conversely if the mouse is outside the circle you are deciding that the user intends to execute a click.
An alternative click vs drag test:
This alternative test is nice because you can let the use either click in the circle or drag the circle. This alternative tries to "read the intent" of the user.
In mousedown, save the starting mouseX & mouseY position.
In mousemove, test if the mouse has moved less than about 5 total pixels (or 10px or whatever).
If moved >=5 pixels start a drag operation.
By the time mouseup occurs, we can just read our
itIsADrag
flag to determine if the user clicked or dragged.Example code and a Demo: