How to rotate an image inside bounding rectangle box - javascript

I have the following img that I'd like to drag (by dragging a circle on top of rectangle) and rotate an image.
When dragging, I just want to rotate an image inside the rectangle and not the rectangle itself. I'm not sure I'm doing this correctly, I have this formula when I start dragging:
const newAngle = Math.atan(circleDrag.y, circleDrag.x) * (180 / Math.PI);
I'm getting the position of the circle from the top of the rectangle, but it's giving me something between 90 to 110 degrees only. Correct way of rotation angle would start from 0 I think, and should rotate between 0-360 degrees.
Could somebody direct me on how to calculate rotation angle?

If I understand your needs right, you have to measure angle of direction from the center point of rectangle to the circle center.
Math.atan(circleDrag.y - rectangleCenter.y, circleDrag.x - rectangleCenter.x)
(At this moment you are calculating direction from coordinate origin to the circle)

Related

Calculate Polygon Rotation so Right Angles are Straight

I have a polygon (RED SQUARE), for simplicity its a square 100x100 with an offset of 100 from the top left. Assume the coordinate system top left is 0,0. So the coordinates for my simple square are: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100].
Now lets say I have another square (BLUE SQUARE), its a 100x100 square also, with the same 100 offset from the top left, but this square is rotated 45 degrees, so its cords are: (rounded) [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150].
How do I calculate the rotation of BLUE SQUARE (45 degrees) if I am given only the coordinates? Assuming I want the right angles to be straight (vertical or horizontal) in this coordinate system (Like RED SQAURE).
Worded another way... Given these coordinates: [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150] how do I calculate the rotation to apply to polygon so its coordinates are this: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100]
Here is a image demonstrating what I am talking about.
Image of both polygons with coordinates
The way you do this is to
calculate the angle between two adjacent points. The formula for this Math.atan2(x2-x1, y2-y1); This will give you the angle the quadrilateral is on.
Rotate the quadrilateral (from its center) by -angle (or by pi/2 - angle) and one side will be horizontal and one will be vertical

Center of a rectangle after rotation and shifting in Javascript, Raphael.FreeTransform

I have a problem with Raphael.Freetransform. I need the coordinates of the four corners of a rectangle. Unfortunately it is not possible to simply use the x,y,width and height attributes of the rectangle after a transformation, because they still have the data of before.
With rectangle.matrix.x(x,y) and rectangle.matrix.y(x,y) I can receive the real x and y coordinates of the top left corner and with rectangle.attrs.scale.x and rectangle.attrs.scale.y I can calculate the changed width and height of the rectangle.
Now I do need the center coordinates of the transformed and shifted rectangle to calculate with the help of the rotation angle the other corners, but unfortunately the rectangle.attrs.center.x function of Raphael.FreeTransform only returns the initial center of the rectangle.
So how can I get the coordinates of the center of the rotated and shifted rectangle?
Thank you in advance!
In the local coordinate system of the element, the center is at x+width/2, y+height/2, under the assumption that the rectangle goes from (x,y) to (x+width, y+height). So you have to find the coordinates in the global system using the matrix functions.

Moving sprite in direction of an angle

I'm making an android game in E3roid I'm attempting to rotate the sprite with the analog stick then have the sprite move in the direction that the ship is facing. Here is the code I used the set the angle.
double angleRadians = Math.atan2(sprite.getRealY() - relativeX,sprite.getRealX() - relativeY);
double angleDegrees = Math.toDegrees(angleRadians);
double angle = -1 * angleDegrees;
sprite.rotate((float)angle);
How would I move the sprite in the same direction as the angle?
do I convert the angle back into Radians?
sprite.move(int,int);
Thanks if you help me!
You can think of your angle as the hypotenuse of a right triangle. To move your sprite a certain number of pixels up and right, you need to use geometry to figure out how many pixels that is. sin and cos should do the trick. If you have forgotten your geometry

How do I rotate div to specific coordinates?

I have two (or 3) coordinates.
They are the 2 upper coordinates: left and right
How do I create a div where the left corner has the coordinate of the left one and the right corner the coordinate of the right one.
The rotation should be created from these coordinates or this height difference between these 2 points
How can I achieve this?
To get the angle between the two coordinates, you could use Math.atan2
var angle = Math.atan2(Y2 - Y1, X2 - X1);
you could then use a CSS3 property to set the correct angle on the div.

How does one rotate a HTML canvas object around a fixed point using mouse action?

For example it may be used in the application of manually adjusting the hands of the clock. I guess it probably involves translating the needle (to make the end point of the needle the centre of rotation) then rotating it, then translating the needle again.
But since the needle listens to the mouse event all the time, the 1st mouse event will be captured. The result is that the needle ends up being translated and not rotated at all. Mouse event is impossible to debug too...
Any idea or code snippets that I can refer to? Using Javascript or CSS to rotate both fine.
In your example, you will want to calculate the angle between the centre of the clock face (black dot), and the current mouse position (red dot), relative to the Y axis (cardinal north if you imagine a compass).
If I remember my trig correctly, you can calculate this by using the following:
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }
In the formula, x and y are the coordinates of the two points, one of which you will know (it is the centre of the clock face), and the other you can get from the mouse move event.
Once you have the angle, you can simply translate to the the centre of the circle, rotate the canvas by the calculated amount, and draw the hand.
Update: I created a jsfiddle to illustrate the angle calculation:
http://jsfiddle.net/DAEpy/1/

Categories

Resources