Matrix Transformation of two-dimensional graphics (II) -- basis of matrix transformation in WPF

In the previous article, matrix transformation of two-dimensional images (I)-basic concepts have introduced some basic knowledge about matrix transformation of two-dimensional images. This article mainly introduces how to perform matrix transformation in WPF.

 

Matrix Structure

In WPF, the matrix structure (struct type) is used to represent a two-dimensional transformation matrix. It is a 3*3 array with the following structure,

Since the third column is constant 0, 0, 1, it is not a public attribute. Only the remaining six attributes are visible.

 

Construction Transformation

Although the matrix class exposes these six attributes, it is too difficult for us to directly set these six attributes to implement translation, rotation, and other transformations, therefore, the following functions are added to help us implement this process. Common functions include:

• Rotate
• Rotateat
• Scale
• Scaleat
• Skew
• Translate

The effects of these functions are superimposed. For example, we need to first translate (10, 20) and then rotate 30 degrees around the origin, as shown below:

Matrix matrix = matrix. identity;
Matrix. Translate (10, 20 );
Matrix. Rotate (30 );

Matrix. identity is the default value of the matrix. It is a constant matrix (which can be reset without any transformation ).

 

Reverse Matrix

The matrix class provides an attribute and function for the reverse matrix:

• The hasinverse attribute is used to check whether the matrix can be reversed.
• Invert () is used to obtain the inverse matrix.

The Reverse Matrix is very useful for us to perform inverse operations on the matrix.

 

Application Transformation

In WPF, the basic elements that can accept matrix operations include point and vector. You can perform matrix transformation using the transform function:

VaR transform = matrix. identity;
Transform. Scale (2, 3 );

VaR point = newpoint (1, 1 );
VaR newpoint = transform. Transform (point );

Console. writeline (newpoint); // output (2, 3)

The "*" operator is also overloaded in C #, which is more intuitive:

VaR newpoint = point * transform;

In addition, the transform function also has a version that can receive arrays. This version does not generate new objects, so it is more efficient.

 

Compound Transformation

As mentioned above, matrices can be superimposed by multiplication operations. The matrix class provides the multiply function to multiply two matrices, in C #, you can also use the "*" operator to implement this process.

Matrix scale = matrix. identity;
Scale. Scale (2, 2 );

Matrix translate = matrix. identity;
Translate. Translate (10, 20 );

VaR transform = scale * translate;

Matrix transform2 = matrix. identity;
Transform2.scale (2, 2 );
Transform2.translate (10, 20 );

Contract. Assert (transform = transform2 );

It should be noted that the matrix does not meet the exchange law, for example:

Contract. Assert (translate * scale )! = (Scale * translate ));

 

Extended Functions

In daily use, our transformation matrix is often superimposed by a series of operations. It may be for efficiency. The return values of WPF transformation functions are void, which is not convenient to combine. Here I have written several extension functions to simplify this process:

Public class geometrytransform {matrix _ matrix; Public matrix {get {return _ matrix;} private set {_ matrix = value ;}} /// <summary> /// obtain a constant transformation // </Summary> Public static geometrytransform identity {get {return New geometrytransform ();}} /// <summary> /// rotate the specified angle with the specified point as the center. /// </Summary> /// <Param name = "angle"> the angle (in degrees) to be rotated ). </Param> /// <Param name = "centerx"> X coordinate of the vertex to be rotated. </Param> // <Param name = "centery"> Y coordinate of the vertex to be rotated. </Param> Public geometrytransform rotate (double angle, double centerx = 0, double centery = 0) {_ matrix. rotateat (angle, centerx, centery); return this ;} /// <summary> /// scale around the specified point by the specified amount /// </Summary> /// <Param name = "scalex"> along the X axis scale </param> /// <Param name = "scaley"> scale along the Y axis </param> /// <Param name = "centerx"> scale operation X coordinate of the center </param> /// <Param name = "centery"> Y coordinate of the scaling operation center </param> Public geometrytr Ansform Scale (double scalex, double scaley, double centerx = 0, double centery = 0) {_ matrix. scaleat (scalex, scaley, centerx, centery); return this ;}/// <summary> // specifies the angle distortion in X and Y dimensions. /// </Summary> /// <Param name = "skewx"> used to distort the X-Dimensional Angle </param> /// <Param name = "skewy"> used to distort the Y-Dimensional Angle </param> Public geometrytransform skew (double skewx, double skewy) {_ matrix. skew (skewx, skewy); return this ;} /// <summary> /// Translation Based on the specified offset /// </Summary> /// <Param name = "offsetx"> offset along the X axis </Param >/// <Param name = "offsety"> offset along the Y axis </param> Public geometrytransform translate (double offsetx, double offsety) {_ matrix. translate (offsetx, offsety); return this;} public geometrytransform transfrom (geometrytransform Transform) {return transfrom (transform. matrix);} public geometrytransform transfrom (Matrix Transform) {_ matrix = _ matrix * transform; return this ;} /// <summary> // reverse conversion // </Summary> Public geometrytransform invert () {_ matrix. invert (); return this;} public static point operator * (point, geometrytransform Transform) {return point * transform. matrix;} // This is not needed if it is struct. Every = is clone public geometrytransform clone () {return New geometrytransform () {matrix = This. matrix };}}

View code

With this extension function, the previous transformation can be simplified as follows:

VaR transform = geometrytransform. Identity. Scale (2, 2). Translate (10, 20 );

In addition, this class can also be directly multiplied by point, which is quite convenient to use.

 

Ui matrix transformation

Due to space limitations, this article only describes the basic operations of WPF matrix transformation. The next article will introduce how to apply matrix transformation to the UI interface.

Matrix Transformation of two-dimensional graphics (II) -- basis of matrix transformation in WPF