Rotating an object with a mouse - javascript

Rotation in 2D. Language: Javascript
Please tell me how to rotate the object with the mouse. I need to: click on the object with the mouse, rotate it to n degrees, release the mouse button and the object should start rotating according to where I released the mouse button.
Example implemented in 3D on Unity - Example

I'm not going to code this for you but this is the general flow of what you should get happening:
Add an event listener for mousedown().
add an event listener for mouseup().
When mousedown() occurs log the position of mouse.
when mouseup() occurs log the position of the mouse.
calculate the delta between positions.
decide how you translate that data into degrees.
use Animate to change to the rotation attribute of the element accordingly.

Related

How to get distanse from click initial coordinates (mousedown) to last mouse position (mouseup)?

Here jsfiddle I have behaviour with mouse
Click (this will show you initial coordinates)
Move mouse whereever you want
On mouseup I want get a distance in px of Y and X from initial position
Now if you make circles around your initial mouse position you can get 100000+ distance. Because it just infinitely added.
Here jsfiddle you can see great example of needed result. BUT, I need to get separate Y and X, and only on mouseup

JavaScript: Trigger area measurement and line measurement from click event,

i have a canvas and inside this canvas, i have images and other stuff, in addition to that, there is a measurement tool, to measure the length of smth inside the canvas. now i need the measurement tool to behave in two different modes:
Line measurement:
this is triggered by two clicks, first click determine the first point of the line, and the second click determine the end point of the line.
Area measurement: this is triggered by one click as follows:
a. mouseDown: determine the first point of the area.
b. mouseMove: selecting the area while mouse is down.
c. mouseUp: determine the end point of the area.
I tried to trigger both by different ways, but the best way still have some issues.
My approach: using YUI lib to define Events
Event.on(canvas,"mousedown", mousedown);
Event.on(canvas,"mousemove", mousemove);
Event.on(canvas,"mouseup", mouseup);
define these three event listeners.
Mouse Down: in this function i store the Date.now() and set initially the area measurement. in addition to settimeout call back after 300ms, i check if the mouse still down, if so, set the mode to area measurement.
Mouse Move: draw the selected mode.
Mouse Up: here i check the Date.now(), if the click is less than 300ms, convert the mode to line and call MouseMove().
But this approach have some issues in the first 300ms, its ambiguous which mode the user wants. using my approach the code knows the mode after 300ms, but before 300ms, it can't be known.
So any helps to improve this approach or setting a new one?
Take a look at this answer that shows how to distinguish clicks from drags. How to distinguish mouse "click" and "drag"
Seems like 2 different things altogether that shouldn't rely on how fast the user moves.
Click, Click = Measure Distance
MouseDown, Drag, MouseUp = Measure Area

HTML5 drag and drop image offset on drop

I have a draggable="true" element which I am dropping into a drop zone. The event gives me back a few properties which I can use to determine it's position and create a new element where it got dropped.
It seems to only give the mouse position. But it doesn't seem to contain the offset of where the image was in relation to the mouse.
Where would I get that information?
A picture to help explain, the mouse is at the yellow dot. The drop event returns event.x and event.y where the mouse is.... But I need to know where the blue dot is, or the offset (red lines)
There are offsetX and offsetY properties in html5 native DragEvent.
For example in React you can get these values through native
function onDragStart(event: React.DragEvent) {
console.log(event.nativeEvent.offsetX)
console.log(event.nativeEvent.offsetY)
}

Change the background position on drag with javascript

How do I drag the background image and change its position? Like when you change the position of your cover photo on facebook.
I've searched everywhere but can't find the right one.
On mousedown, log the current mouse position. Create a mask, and on that mask:
On mousemove, get the current mouse position and subtract it from the original mouse position. Move the background accordingly
On mouseup, remove the mask and save the new position.
You can try with this jQuery plugin, and is as easy as:
element.backgroundDraggable()
Here you have a demo

Opera, event.layerX / event.layerY properties and mouseDropped event

I am writing some application with Raphael.js. And it should handle mouse drag events.
That is, when mouse drag is ended, i try to catch the point on the Raphael's Paper object (DIV / SVG element, actually) where the mouse caused drop event.
FireFox and Chrome are doing well with event.layerX and event.layerY properties. But Opera does not have those.
It has clientX / clientY, offsetX / offsetY and pageX / pageY properties (may be mistaken in the last two' names) however. But i can't create any algorithm to calculate the final mouse position.
See, the mouse starts "dragging" pin of an circuit symbol (without actual dragging its image) and ends dropping on another one:
So, Opera shows coordinates like (5, 7) when mouse causes drop event. I assume these are the coordinates around the second pin. But i do not need those - using them i can not find the pin user tries connect to.
So, the questionis: do you know any way to find the mouse cursor coordinates when the drop event is called, relatively to the parent element it is dropping (e.g. Raphael's Paper object and / or its container in the case described).
Can you keep updating variables with the location of the cursor during mouse move when the mouse button is down and use the last values set when the drop is fired?

Categories

Resources