In order to figure out this transform, I spent several mornings and weekends relearning linear algebra and trigonometric functions. .
Don't talk nonsense, just start.
For the display of computer graphics, we can all use a matrix to represent [1 0 0,0 1 0,0 0 1][xy 1] = [xy 1]. When there is no change in the graphics, the original [ 1 0 0,0 1 0,0 0 1] matrix to calculate the position of the graph, and when we need to change the graph, we must modify the calculation matrix.
Start with translation. Translation is relatively simple. Assuming that the coordinates of the graphic point are (x, y), the coordinates of the target point can be represented by (x+rx, y+ry), and rx and ry are the moving distances. , Then the matrix is [1 0 rx,0 1 ry,0 0 1][xy 1] = [x+rx y+ry 1], which is the position of this graph, so it is easy for us to perform The translation operation is to move in the x-axis and y-axis directions.
Then zooming, zooming is easier, assuming that the coordinates of the graph point are (x, y), the coordinates of the target point can be represented by (x sx, y sy), sx and sy are the moving distances, then the matrix is [sx 0 0,0 sy 0,0 0 1][xy 1] = [x sx y sy 1].
The calculation method of rotation is more complicated. At first, I tried to use the theorems of sine and cosine to solve the problem, but it became more complicated. Just simply use the calculation formula of sine angle and cosine angle to solve it. I wrote it by hand.
Explain, the target point is point B (a, b), the rotation angle α is known, the coordinates of point A are (x, y), and x, y, α are used to represent a and b. Here we assume that the origin is connected to point B The angle between the line and the x-axis is the β angle.
Our page uses the upper left corner as the origin, the x axis is right, and the y axis is down, so there will be a sign difference with the calculation, but the specific algorithm is still the same.
The final point is (xcosα-ysinα, xsinα+ycosα), and the matrix is [cosα -sinα 0,sinα cosα 0,0 0 1][xy 1] = [xcosα-ysinα xsinα+ycosα 1], which is Explain the reason why our parameter here in transform:rotate() is α, and it is clockwise instead of counterclockwise.
There is also a method matrix in our CSS transform. This method provides 6 parameters, which are the first 6 bits in the matrix, so this is why the default parameters of matrix are (1,0,0,0,1,0), This is the first 6 bits of the original calculation matrix. The matrix can be used to directly modify the values in the matrix to calculate the changes in the graph, but this method will be more difficult to calculate, but for example, if it is just translation, just give the parameter (1,0,rx ,0,1,ry).