Some applications of algorithms in the front end-rotation

In the usual front-end development business, there are fewer scenarios where algorithms are used, and scenarios with more algorithms are often H5 games and event pages.

Let's share the algorithm application in the development scenario.

rotate

First think about how to achieve the rotation in the figure below?

Mobile phone scan code experience

Experience link: http://auto.163.com/special/h5_gzcz_lier/

=========================================================

The difficulty is how to easily determine the angle and direction of the rotation of the finger drag

A better way to use vector product

Review the knowledge of vector product in mathematics first

Modulus length: (Here θ represents the angle between the two vectors (under the premise of the same starting point) (0°≤θ≤180°), which is located on the plane defined by the two vectors.)

Direction: The direction of the vector product of the a vector and the b vector is perpendicular to the plane where the two vectors are located, and obeys the right-hand rule. (A simple way to determine the direction of the result vector that satisfies the "right-hand rule" is as follows: If the coordinate system satisfies the right-hand rule, when the four fingers of the right hand turn from a to b at an angle of no more than 180 degrees, The thumbs up point to the direction of c.)

Suppose the coordinates of the a vector are (ax, ay, ax), the coordinates of the b vector are (bx, by, bz), and the values of i, j, and k are 1. The z value of the vector is 0. That is, the vector is only in the x, y plane.

The above formula can be simplified to axb = ax by-ay bx

In the above figure, the coordinate of position a (1, 2, 0) and position b (2, 1, 0), that is, ab is in the xy plane.

When the vector rotates from position a to position b, the result calculated according to the above formula is -3;

When the vector rotates from position b to position a, the result calculated according to the above formula is 3;

So we can judge the direction based on the positive or negative of the result value, and get the angle of rotation based on the calculated positive and mysterious value.

Demo code: https://codesandbox.io/s/dreamy-mccarthy-l2oeu?file=/src/index.js