Let’s look at the following question:

Given point A(x1,y1) and point B(x2,y2), find the Angle θ between the two points and the point O(x0,y0) :
< theta equals arctan [(y2 - y0)/(x2 - x0)] - arctan [(y1 - y0)/(x1 - x0)]

Does that smell familiar? The math involved is trigonometric functions taught in junior high school. In the implementation of drag and rotate picture, the most consistent is the above problem, the next good explanation.

The formula

Definition:

  • The line that goes through point A and goes through the origin with the X-axis is Angle A
  • The line that passes through point B and the origin is the X-axis Angle B
  1. So let’s figure out the two sides of Angle Aa=y1-y0andb=x1-x0
  2. So let’s figure out Angle A from the inverse tangent function,arctan(a/b)
  3. And then the two sides of Angle Ba'=y2-y0andb'=x2-x0
  4. So if we know the inverse tangent function of Angle B,arctan(a'/b')
  5. And finally according to the formula< theta = < - < BAnd that’s the Angle we need to figure out.

Figure out the result of the formula

Here we have to mention inverse trigonometric functions such as inverse tangent:

Inverse tangent is a mathematical term that refers to the inverse of the tangent function y=tanx. Calculation method: Suppose two acute angles are respectively A and B, then they can be expressed as follows: if tanA=1.9/5, then A= Arctan 1.9/5; If tanB=5/1.9, then B=arctan5/1.9. If you want a specific Angle you can look it up in a table or use a computer.

So if you look at it from A computer point of view, the inverse trigonometric function is going to be radians, and the Angle A that we’ve been using is going to be radians of Angle A.

Strictly speaking, radian is the result of this drag and drop, and I believe that you are not CSS masters who are exposed to the knowledge should also be mentioned, like CSS units on rotation include:

  • Rad: Radians, the circle has 2PI Radians.
  • Deg: Degress. A circle has 360 degrees.
  • It Turns one round.

Transform: rotate(.5rad), but deG makes the values more intuitive and readable.

Convert radians (rad) to angles (DEG) :
X = < A * (180 / PI)

Get the two points you need

Here’s the well-known drag-and-drop process:

  1. Click on the image
  2. Move the mouse
  3. Release the mouse

Click on the image to capture the point (point A) and move the mouse to record another point (point B), so that you have two points in your hand. Drag rotates around the center of the image, which is used as the origin (let’s call it point O) in the formula.

In terms of processing, we can calculate the radian of Angle A when we click on the image, and then calculate the radian of Angle B when we move the mouse, and then subtract Angle B from Angle A to get the actual number of degrees rotated during dragging. For details, see the following examples.

Codepen. IO/packy1980 /….

A complete drag rotation example is shown by checking the last rotation radian