Development tools and key technologies: WPF C# Author: Huang Jimin Written on: November 5, 2021
1, RenderTransform effect (deformation)
The RenderTransform class in WPF is designed to directly change the shape of a Silverlight object (such as scaling and rotating an element). The deformation attribute members contained in RenderTransform are specially used to change the shape of Silverlight objects. It can stretch, rotate and twist elements, At the same time, deformation effects are also commonly used to help produce various animation effects.
- RenderTransform class:
The members of this category are as follows:
TranslateTransform: enables the translation of an object's position.
RotateTransform: it can make an object rotate clockwise or counterclockwise according to the center point.
ScaleTransform: enables an object to scale.
SkewTransform: can make an object twist (bevel) change.
TransformGroup: a collection of transformations that can combine the scaling, rotation, and distortion effects of an object (combining multiple transformations).
MatrixTransform: it enables an object to achieve more complex deformation through matrix algorithm.
Deformation elements include translation deformation, rotation deformation, scaling deformation, distortion deformation, matrix deformation and combined deformation elements,
Deformation effects are often used to make objects produce deformation effects without changing the composition of the object itself, so deformation elements
It often helps to produce various animation effects in Silverlight.
In general, it is easier to use the RenderTransform attribute than the LayoutTransform attribute for MediaElement elements
OK, because the RenderTransform attribute is lightweight. And it can be used conveniently
The RenderTransformOrigin property value so that you can use relative coordinates for specific transformations, such as rotation.
In general, it is easier to use the RenderTransform attribute than the LayoutTransform attribute for MediaElement elements
OK, because the RenderTransform attribute is lightweight. And it can be used conveniently
The RenderTransformOrigin property value so that you can use relative coordinates for specific transformations, such as rotation.
- Translatetransform:
It contains X and Y attributes. Take the original object as the coordinate origin (0,0), and then translate and transform to the x-axis and y-axis.
The following is a simple page demonstration using XAML Code:
<Grid>
<Canvas>
<!--Define two pictures-->
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Opacity="0.5" Width="213" Height="150"></Image>
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Width="213" Height="150">
<!--Translation change-->
<Image.RenderTransform>
<TranslateTransform X="60" Y="60">
</TranslateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
effect:
- RotateTransform:
Including the attributes Angle, CenterX and CenterY
The following is a simple page demonstration using XAML Code:
<Grid>
<Canvas>
<!--Define two pictures-->
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Opacity="0.5" Width="213" Height="150">
</Image>
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Width="213" Height="150">
<!--Translation change-->
<Image.RenderTransform>
<RotateTransform Angle="45" CenterX="0" CenterY="0">
</RotateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
effect:
- Scaletransform:
It includes attributes ScaleX, ScaleY, CenterX and CenterY, where ScaleX and ScaleY attributes represent the multiple of the object's scaling in the X and Y axes, and CenterX and CenterY attributes are used to specify a center point.
The following is a simple page demonstration using XAML Code:
<Grid>
<Canvas>
<!--Define two pictures-->
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Opacity="0.5" Width="213" Height="150">
</Image>
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Width="213" Height="150">
<!--Translation change-->
<Image.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5">
</ScaleTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
effect:
5. Skewtransform:
Includes attributes AngleX, AngleY, CenterX, CenterY. Where AngleX is used to tilt the element relative to the X axis, and AngleY is the tilt angle of the element around the Y axis. Similarly, CenterX and CenterY are the center point locations.
The following is a simple page demonstration using XAML Code:
<Grid>
<Canvas>
<!--Define two pictures-->
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Opacity="0.5" Width="213" Height="150">
</Image>
<Image Canvas.Top="48" Canvas.Left="55" Source="image/01.jpg"
Width="213" Height="150">
<!--Translation change-->
<Image.RenderTransform>
<SkewTransform AngleX="30" AngleY="10">
</SkewTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
effect:
6. TransformGroup:
Scale, rotate, twist and other change effects are combined. The above four basic changes are only single changes. If you want to realize the superposition of multiple effects, you must use TransformGroup, otherwise an error will be reported. The function of TransformGroup is similar to the function embedded in the StackPanel in the control layout. It is to combine a variety of change elements into a change container.
The following is a simple page demonstration using XAML Code:
<Grid>
<Canvas Width="400" Height="Auto" Margin="0,0,-6.4,0.4">
<Rectangle Canvas.Top="80" Canvas.Left="120" Width="200" Height="100"
Stroke="Black" StrokeThickness="5">
<Rectangle.RenderTransform>
<TransformGroup>
<!--RotateTransform Transformation-->
<RotateTransform Angle="10"></RotateTransform>
<!--SkewTransform Transformation-->
<SkewTransform AngleX="-10" AngleY="30" CenterX="20" CenterY="50"></SkewTransform>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<ImageBrush ImageSource="image/01.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Grid>
effect:
7. MatrixTransform matrix transformation:
In fact, it is the bottom implementation code of other deformation classes. Other classes are based on the extension of this class, so that users can apply it more simply and conveniently. As for MatrixTransform, the corresponding deformation effect is obtained through a matrix algorithm.
Use the MatrixTransform class to create custom transformations that are not provided by the RotateTransform, SkewTransform, ScaleTransform, or class.
In the two-dimensional x-y plane, 3x3 matrix is used for transformation. You can multiply affine matrix transformations to form linear transformations, such as rotation and tilt (shear), followed by translation.
The final column of affine matrix transformation is equal to (0, 0, 1); Therefore, you only need to specify the members in the first two columns.
WPF) Windows Presentation Foundation (Matrix) has the following structure:
The value of the third column in the matrix is fixed! The member OffsetX OffsetY in the last row represents the conversion value. Methods and properties usually specify the transformation matrix as a vector with only six members; the members are as follows: (M11, M12, M21, M22, OffsetX, OffsetY)
Principle:
The original coordinates (x0, y0) can be obtained by matrix multiplication through this 3 * 3 matrix (x0 * M11+x0 * M21,y0 * M12+y0 * M22), and then the new coordinates (x1, y1) can be obtained by adding (OffsetX,OffsetY). That is to say, the final coordinates (x1, y1): X1 = x0 * M11 + x0 * M21 + offsetx, y1 = y0 * M12 + y0 * M22 + offsety