UWP development-two-dimensional transformation and three-dimensional transformation, uwp two-dimensional transformation 3D

UWP development-two-dimensional transformation and three-dimensional transformation, uwp two-dimensional transformation 3D

In development, due to some requirements, we may need to perform some translation, scaling, rotation, or even 3D transformations. So let's talk about how to implement these transformations in UWP.

I,

Two-dimensional transformation:

UIElement. RenderTransform

A. TranslateTransform, translation:

Attribute: X, Y. I believe everyone knows how to use it. I will not talk nonsense here.

B. RotateTransform, rotation:

Attribute: Angle

C. ScaleTransform, scaling:

Attribute: ScaleX, ScaleY

D. SkewTransform, distorted:

Attribute: AngleX, AngleY

E. MatrixTransform, matrix transformation

Xmal usage:

<MatrixTransform Matrix="M11 M12 M21 M22 X Y">

This is a little more complicated. Theoretically, any transformation can be done. It is actually a transformation matrix.

Matrix M:

M11	M12	0
M21	M22	0
X	Y	1

I think we should all know linear algebra, that is, matrix multiplication. If the point p0 (x0, y0), the transformed point is p1 = [x0, y0, 1] * M:

X1 = x0 * M11 + x0 * M21 + X;

Y1 = y0 * M12 + y0 * M22 + Y;

P1 (x1, y1 ).

Ps: in simple words, the dot multiplication of a matrix is the addition of rows * columns. That is to say, if the X point of a matrix is multiplied by Y, the number of columns of X must be equal to the number of rows of Y.

Additionally, if multiple transformations are required at the same time, UWP provides two methods:

1. TransformGroup:

　　　　

　　　　　　　　   <TransformGroup>                    <RotateTransform />                    <ScaleTransform />                </TransformGroup>

Because only one sub-element can be used in RenderTransform, A TransfromGroup is required when multiple transformations are required at the same time.

2. CompositeTransform, composite Transformation:

Attributes: TranslateX, TranslateY, and Rotate

Note that the conversion requires a central point. Here, UWP provides two ways to set the central point:

1. RenderTransformOrigin:

This attribute is the property of the control to be transformed, rather than the property of RenderTransform. Its value is Point (x, y ). when the value in the control is 0-1 and greater than 1, the conversion center will be out of the control or even layout.

2. CenterX, CenterY:

Set the value of the absolute X axis and Y axis, which is the absolute value rather than the relative value.

We recommend that you use the former. In most cases, we do not know the specific size of the control, and the former uses relative values, so both the amount of code and the amount of computing are better than the latter.

II,

3D Transformation:

UIElement. Projection

A. PlaneProjection

Attributes: CenterOfRotationX, CenterOfRotationY, CenterOfRotationZ; center point of rotation P (x, y, z)

GlobalOffsetX, GlobalOffsetY, GlobalOffsetZ; translation of the world coordinate system

LocalOffsetX, LocalOffsetY, LocalOffsetZ; Local Coordinate System

RotationX, RotationY, and RotationZ

If you do not understand why there are two coordinate systems, refer to coordinate transformation between the two coordinate systems in the three-dimensional graphics system.

B. Matrix3DProjection

Xaml usage:

<Matrix3DProjection  ProjectionMatrix=　　　　"M11,M12,M13, 0,                                              M21,M22,M23, 0,                                              M31,M32,M33, 0,                                               X , Y , Z , 1"/>

 

Similar to the preceding two-dimensional matrix transformation, only one dimension is added:

Matrix M:

M11	M12	M13	0
M21	M22	M23	0
M31	M32	M33	0
X	Y	Z	1

Set p0 (x0, y0, z0) to p1 = [x0, y0, z0, 1] * M.

X1 = x0 * M11 + x0 * M21 + x0 * M31 + 1 * X;

Y1 = y0 * M12 + y0 * M22 + Y0 * M32 + 1 * Y;

Z1 = z0 * M13 + z0 * M23 + z0 + M33 + 1 * Z;

P1 (x1, y1, z1 ).

Okay, basically. If you still haven't understood the matrix, I can only say that you really need to learn it.