Matrix4 matrix changes

Serialized: Flutter layout -1-column Serialized: flutter layout -2-row serialized: flutter layout -3-center serialized: flutter layout -4-container

This is the transformation matrix, 16 parameters in total or you could view it as a 4 by 4 matrix. Specific parameters are as follows:

-Leonard: Scale and transform. Mobile rotationZ: Z axis rotate rotationX: X axis rotate rotationY: Y axis rotate the columns: compose: setting up a new matrix composite translation, rotation, scaling, and form a new state copy: copy a tensor (matrix) of 4 * 4Copy the code

4 * 4 matrix:

Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
Copy the code

Matrix4. Diagonal3Values (2, 10, 1)

Matrix4. Diagonal3Values (1, 1, 1) shows the proportion of scaling, respectively along the x, y, z three directions, the x axis is to the right, y axis is down, and the z axis is from the screen up, during the said positive, > 1 said amplifier, less than 1 is greater than 0 to shrink, reverse negative said.

The red box is 80 in width and height, and the small box inside is 30 in width and height, so the zoom time can better reflect the relative position of the two. Specific use method or value, you can carefully look at the picture above. The z-axis changes can not be seen on the flat phone. We can see the z-axis changes in detail when we do rotation later.

Scaling can be written in the following ways: For example, zoom in x by a factor of 2.

  1. Matrix4.diagonal3Values(2, 1, 1)
  2. Matrix4.diagonal3(v.Vector3(2, 1, 1))
  3. Matrix4.diagonal3(v.Vector3.array([2, 1, 1]))
  4. Matrix4(2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1) all represent 30 units of movement in the positive x direction. Import ‘package:vector_math/vector_math_64.dart’ as v; The fourth is a 4*4 matrix notation: the first, sixth and eleventh values of the matrix respectively represent the X-axis scaling, Y-axis scaling and z-axis scaling

2. Transform: Move

Represents the translation distance, respectively along x, Y and Z directions, x axis is moving to the right, Y axis is moving down,z axis is moving up from the screen, positive value represents forward movement, negative value represents negative movement, where the z-axis movement cannot be seen in the plane

Move can be written as follows: For example, move 30 units to the right.

  1. Matrix4.translationValues(30, 0, 0)
  2. Matrix4.translation(v.Vector3(30, 0, 0))
  3. Matrix4.translation(v.Vector3.array([0, -30, 0]))
  4. Matrix4(1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 30, 0, 0, 1) all represent 30 units of movement in the positive x direction. Import ‘package:vector_math/vector_math_64.dart’ as v; The fourth is written as a 4*4 matrix: the 13th, 14th and 15th values of the matrix respectively represent the X-axis translation, Y-axis translation and z-axis translation

3. RotationZ: Rotation about the Z-axis

It’s rotating around the Z axis, clockwise in the positive direction, anticlockwise in the negative direction, so it’s rotating in the positive direction from the x axis to the y axis

Two ways to write it:

  1. Matrix4.rotationz (PI / 6), parameter is radians
  2. Matrix4(cos(PI / 6), sin(PI / 6), 0, 0,-sin(PI / 6), cos(PI / 6), 0, 0, 0, 1, 0, 0, 0, 0, 0, 1), and the parameter is radians. So you change the values of 1, 2, 5, and 6 where 1 and 6 are the same as cosine 2 and 5 are the opposite of 2 sines, 5 is minus sine

4. RotationX: Rotation about the X-axis

It’s rotating around the X axis, clockwise in the positive direction, counterclockwise in the negative direction, so it’s rotating in the positive direction from the y axis to the z axis

Two ways to write it:

  1. Matrix4.rotationx (PI / 6), parameter is radians
  2. Matrix4(1, 0, 0, 0, 0, cos(PI / 6), sin(PI / 6), 0, 0, -sin(PI / 6), cos(PI / 6), 0, 0, 0, 0, 1), parameter is radians. So you change the matrix of 6, 7, 10, 11, 6 cosine PI over 6, 7 sine PI over 6, 10 minus sine PI over 6, 11 cosine PI over 6

5. RotationY: Rotation about the Y axis

On the left side of the gray size is the original shape Blue is the shape of the Y axis rotate 30 ° The red dotted line is projected a dotted line Red solid line is the rotation in the x, y plane is on the phone's screen projection of 0-90 is the rotation Angle, the greater the final on a mobile phone is smaller, the projection of 90 ° of time is a line, line and point is infinitesimal, is invisible to the naked eye, So you have 90 degrees where there's nothing there. If you want to see 90 degrees, change the Angle to 178* PI /180, and a line will appearCopy the code

It’s rotating around the Y axis, clockwise in the positive direction, counterclockwise in the negative direction, so it’s rotating in the positive direction from the x axis to the z axis

Two ways to write it:

  1. Matrix4.rotationy (PI / 6), parameter is radians
  2. Matrix4(cos(PI / 6), 0, -sin(PI / 6), 0, 0, 1, 0, 0, sin(PI / 6), 0, cos(PI / 6), 0, 0, 0, 0, 1), parameter is radians. So you change the matrix of 1, 3, 9, 11, 1 cosine PI over 6, the value of 3 – sine PI over 6, the value of 9 sine PI over 6, the value of 11 cosine PI over 6

Columns: Set a new matrix

 Matrix4.columns(
                        v.Vector4(1, 0, 0, 0),
                        v.Vector4(0, 1, 0, 0),
                        v.Vector4(0, 0, 1, 0),
                        v.Vector4(0, 0, 0, 1)) 
Copy the code

Import ‘package:vector_math/vector_math_64.dart’ as v;

Each of the four parameters is a 4-dimensional vector, which is a 1-dimensional array of 4 values. It has the same effect as setting the Matrix4(1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) directly

7, compose: composite translation, rotation, scaling, forming a new state

Matrix4.columns( 
Vector3 translation, 
Quaternion rotation, 
Vector3 scale) 
Copy the code

The first translation parameter is the three-dimensional vector v.vector3 (30,0,0), which represents a 30-unit shift to the right affecting the 13, 14, and 15 values of the matrix. The second parameter is a 4-dimensional vector, which can also be called a quaternion in the rotation to calculate the rotation. Quaternion and Euler Angle can be converted to each other. The parameters affecting the matrix are 1, 2, 3, 5, 6, 7, 9, 10 and 11, which means that these parameters affect the rotation. As can be seen from the rotation rotationxyz above:

The X-axis rotation affects the parameters 6, 7, 10, 11 the Y-axis rotation affects the parameters 1, 3, 9, 11 and the Z-axis rotation affects the parameters 1, 2, 5, 6

The third parameter is a three-dimensional vector: the scaled, influence matrix 1, 6, 11.

So scaling is related to rotation, and as you can see from the rotated image above,

The method of calculation is to calculate the translation parameters and the rotation of the four elements, and then scale

8, copy: copy a 4*4 tensor

Matrix4.copy( Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) )
Copy the code

9. Identity: Restore the initial state, namely the 4*4 identity matrix

Matrix4.identity()
Copy the code

May I know what the inverted matrix is

You go east, you go west

May I know what the difference is between the inverted distance and the inverted distance between the inverted distance and the inverted distance between the inverted distance and the inverted distance between the inverted distance and the inverted distanceCopy the code
May BE inverted(Matrix4(2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1))? That's all coordinates *0.5Copy the code

Examples of 6,7,8,9,10 are as follows:

Outer (merge), Skew (warp), skewX(x-warp), skewY(y-warp), Zero (zero matrix), fromList(convert a 16-bit one-dimensional array into a 4-by-4 matrix)

* outer Merge the product of two 4-dimensional vectors * skew: skew * skewX: skew along the X-axis * skewY: skew along the Y-axis * Zero: a 4-by-4 tensor with all zeros * fromList: Converts a 16-bit one-dimensional array into a 4-by-4 matrixCopy the code