Simple encapsulation of geometric transformation by Js

If programming involves games or animations, we are likely to use geometric transformations. If we had a linear algebra in college, we would know whether it was 2d or 3d.

If programming involves games or animations, we are likely to use geometric transformations. If we have studied linear algebra, we will know that matrix is an important tool for linear transformation, whether 2d or 3d geometric transformation. Any linear transformation can be expressed in a matrix as a consistent form that is easy to calculate, and multiple transformations can be easily connected by multiplication of matrices.

This article mainly encapsulates the following transformations and briefly describes the conversion principle:

1. Translation Transformation: only changes the position of the image without changing the size.
2. Rotation and Transformation: maintain the relationship between different parts of the image, and the shape remains unchanged after the transformation.
3. Proportional Transformation: You can change the image size and shape.
4. Miscut Transformation: changes the relationship between image angles, and even causes image distortion.
5. Symmetric transformation: symmetric transformation of the image on the x or y axis or y = x or y =-x.

View demo
In the program, we will define a Matrix class matrix, in which the Matrix attributes are saved in the form of a matrix represented by a two-dimensional array. When we initialize a Matrix object, we need to pass in the specific data of this matrix:

var mtx= new matrix({    matrix:[       [1,0,0],       [0,1,0],       [0,0,1]    ]});

Transformations in the 2D coordinate system:

In the 2d coordinate system, we use the following transformation matrix:

The upper left area (abde) is responsible for the scaling, rotation, symmetry, and staggered conversion of the image, and cf is responsible for the translation transformation.

2d Translation:

To make a point shift, the transformation matrix we use is:

To make the x, y point translate the shift of Tx and Ty, multiply the [x, y, 1] matrix with the above matrix. The specific encapsulation is as follows:

/*** 2d translation **/translate2D: function (x, y) {var changeMtx = new matrix ({matrix: [[, 0], [, 0], [x, y, 1]}); return this. multiply (changeMtx );},

2d Scaling:
When the origin is taken as the reference point under the 2d coordinate axis, the conversion matrix used for scaling and transformation is as follows:

If the [x, y, 1] matrix is multiplied by the preceding matrix, the coordinate value after zooming relative to the origin can be obtained.

However, in many cases, we may need to scale relative to any point, not just to scale relative to the origin. Therefore, we 'd better encapsulate the scaling method relative to any point on the coordinate axis. Zooming relative to any point is actually based on the zooming and conversion relative to the origin point. The specific steps for zooming relative to the point (x1, y1) are as follows:

Translate the coordinate origin to (x1, y1)-> transform relative to the origin-> translate the coordinate origin back

Matrix computing:

The method for zooming any point is encapsulated as follows:

/*** 2d scaling **/scale2D: function (scale, point) {// scaling ratio, reference point var sx = scale [0], sy = scale [1], x = point [0], y = point [1]; var changeMtx = new matrix ({matrix: [[sx, 0, 0], [0, sy, 0], [(1-sx) * x, (1-sy) * y, 1]}); return this. multiply (changeMtx );},

2d symmetric transformation:
The transformation matrix used for 2d symmetric transformation is as follows:

Different symmetric transformations are implemented by changing the value of abde:

Transformation relative to the X axis: B = d = 0 a = 1 e =-1

Transformation relative to the Y axis: B = d = 0 a =-1 e = 1

Transformation relative to the origin: B = d = 0 a =-1 e =-1

Transformation relative to y = x: B = d = 1 a = e = 0

Transformation of y =-x: B = d =-1 a = e = 0

Therefore, multiply by different transformation matrices to get different transformation effects:

/*** 2d symmetric transformation **/symmet2D: function (axis) {// symmetric axis var changeMtx; axis = "x" & (changeMtx = new matrix ({// symmetric matrix with respect to the x axis: [[, 0], [0, 1]}); axis = "y" & (changeMtx = new matrix ({// symmetric matrix with respect to the y axis: [[-, 0, 0], [, 1]}); axis = "xy" & (changeMtx = new matrix ({// symmetric matrix relative to the origin, 0], [0,-], [, 1]}); axis = "y = x" & (changeMtx = new matrix ({// symmetric matrix with respect to y = x: [[0, 1, 0], [1, 0], [0, 0, 1]}); axis = "y =-x" & (changeMtx = new matrix ({// symmetric matrix with respect to y =-x: [[0,-], [-, 0], [, 1]}); return this. multiply (changeMtx );},

2d mistangent Transformation:
The so-called mistangent transformation refers to the distortion of the image, such as the skew. For example, the following are the mistangent transformations in the x and y directions:

The transformation matrix under the error tangent transformation is:

[X, y] The transformed coordinates are: [x + by, dx + y, 1]. It can be seen that when B is not 0 and d is 0, the value of y remains unchanged, and the X axis increases linearly according to the value of B. Therefore, we can draw the diagram above. When B is 0 and d is not 0, the x value remains unchanged. The Y axis increases linearly Based on the d value. Therefore, the above B diagram can be obtained.

Encapsulation of miscut transformations:

/*** 2d mistangent transformation **/shear2D: function (kx, ky) {var changeMtx = new matrix ({matrix: [[1, kx, 0], [ky, 1, 0], [0, 0, 1]}); return this. multiply (changeMtx );},

2d Rotation Transformation:
Like a scaling transformation, a rotation transformation can also be a point-to-point transformation or a point-to-point transformation. Therefore, the method of transformation relative to any point is directly encapsulated here.
Rotate relative to any point (x1, y1) = translate the coordinate origin to (x1, y1)-> rotate relative to the origin-> translate the origin back
The Rotation Transformation Matrix relative to the origin is:

Therefore, the conversion matrix relative to any point rotation is:

The encapsulation method is as follows:

/*** 2d rotation **/rotate2D: function (angle, point) {var x = point [0], y = point [1]; var cos = Math. cos; var sin = Math. sin; var changeMtx = new matrix ({matrix: [[cos (angle), sin (angle), 0], [-sin (angle), cos (angle ), 0], [(1-cos (angle) * x + y * sin (angle), (1-cos (angle) * y-x * sin (angle ), 1]}); return this. multiply (changeMtx );},

 

Since there is no big difference between the transformation under the 3D axis and that under the 2D axis, we will not detail it here. The complete source code below also contains the section of the geometric transformation under the 3d axis, you can also check out the children's shoes you are interested in ~
In addition, you may think that there is no zcoordinate in the real sense in the dom or canvas environment, so the geometric transformation under the 3d coordinate axis does not make much sense. In fact, although 3D cannot be realized in the true sense, it is still possible to implement pseudo 3D, visually, we can express the coordinate value of the element Z axis through the coordinate value of xy and the variation of the element size. For details about this, refer to the rotate3D series of hongru.