WPF learning 05: 2D drawing Transform, wpf052dtransform

WPF learning 05: 2D drawing Transform, wpf052dtransform

In the previous article about WPF learning 04: Drawing 2D shapes, we can draw basic images.

When it comes to graphic application programming, it is not enough to draw only basic graphics. We can use the Transform class provided by WPF to perform deformation operations on controls.

 

Example

A composite image rotated by a triangle:

Private void Window_Loaded (object sender, RoutedEventArgs e) {for (int I = 0; I <36; I ++) {var polygon = new Polygon () {Fill = new SolidColorBrush (Colors. lightBlue), Points = new PointCollection () {new Point () {X = 0, Y = 0}, new Point () {X = 100, Y = 5 }, new Point () {X = 0, Y = 10 }}; polygon. renderTransform = new TransformGroup () {Children = new TransformCollection () {new RotateTransform () {Angle = I * 10 }}; Canvas. setTop (polygon, 100); Canvas. setLeft (polygon, 200); MainCanvas. children. add (polygon );}}

About Transform

Let's review the inheritance tree of Shape:

Public Transform LayoutTransform {get; set;} public Transform RenderTransform {get; set ;}

By configuring these two properties of the control, we can perform various types of deformation on the control.

Let's first understand how to use various types of deformation, and finally explain the differences between the two attributes.

WPF provides five deformation methods: TranslateTransform (displacement deformation) RotateTransform (rotation deformation) ScaleTransform (scaling deformation) SkewTransform (Distortion deformation) MatrixTransform (matrix transformation deformation ).

TranslateTransform

<Canvas Name = "MainCanvas"> <Rectangle Width = "150" Height = "50" Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"/> <TextBlock canvas. left = "39" Canvas. top = "16"> I am the original image </TextBlock> <Rectangle Width = "150" Height = "50" Fill = "# 019AFF"> <Rectangle. renderTransform> <TranslateTransform X = "50" Y = "150"> </TranslateTransform> </Rectangle. renderTransform> </Rectangle> <Rectangle Width = "150" Height = "50" Fill = "# 019AFF"> <Rectangle. renderTransform> <fig X = "150" Y = "60"> </TranslateTransform> </Rectangle. renderTransform> </Rectangle> </Canvas>

Background code implementation:

var rect = new Rectangle(){    Fill = new SolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),    Width = 150,    Height = 50,    RenderTransform = new TransformGroup()     {        Children = new TransformCollection()         {            new TranslateTransform(){X=50,Y=150}        }    }};MainCanvas.Children.Add(rect);

 

RotateTransform

 

XAML implementation:

<Canvas Name = "MainCanvas"> <Polygon Points = ", 0, 50, 25" Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"/> <Polygon Points =" 0, 0, 50, "Fill =" # 019AFF "> <Polygon. renderTransform> <TransformGroup> <RotateTransform Angle = "45"> </RotateTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> <TextBlock Canvas. left = "39" Canvas. top = "16"> I am a source image </TextBlock> <Polygon Points = ", 0, 50, 25" Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "50" Y = "150"> </TranslateTransform> <RotateTransform Angle = "90" CenterX = "125" CenterY = "175"> </RotateTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> </Canvas>

Background code implementation:

var polygon = new Polygon(){    Fill = new SolidColorBrush(Color.FromRgb(0x01, 0x9A, 0xFF)),    Points = new PointCollection()    {        new Point(){X=0, Y = 0},        new Point(){X=0, Y = 50},        new Point(){X=150, Y = 25}    },    RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {            new TranslateTransform(){X=50,Y=150},            new RotateTransform()            {                CenterX = 125,                CenterY = 175,                Angle = 90            }        }    }};MainCanvas.Children.Add(polygon);

    Note:: Here, CenterX and CenterY specify the center of rotation, which is (0, 0) by default)

 

ScaleTransform

<Canvas Name = "MainCanvas"> <Polygon Points = ", 0, 50, 25" Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"/> <Polygon Points =" 0, 0, 50, "Fill =" # 019AFF "> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "100"> </TranslateTransform> <ScaleTransform ScaleX = "2"> </ScaleTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> <TextBlock Canvas. left = "39" Canvas. top = "16"> I am a source image </TextBlock> <Polygon Points = ", 0, 50, 25" Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "50" Y = "150"> </TranslateTransform> <ScaleTransform ScaleX = "0.5" ScaleY = "0.5"> </ScaleTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> <Polygon Points = ", 0, 50," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "190" Y = "250"> </TranslateTransform> <ScaleTransform ScaleX = "-0.5" ScaleY = "0.5" CenterX = "190"> </ScaleTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> </Canvas>

The background code is omitted. refer to the previous background code implementation.

 

SkewTransform

<Canvas Name = "MainCanvas"> <Polygon Points = ", 0, 50, 25" Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"/> <Polygon Points =" 0, 0, 50, "Fill =" # 019AFF "> <Polygon. renderTransform> <TransformGroup> <SkewTransform AngleY = "30"> </SkewTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> <TextBlock Canvas. left = "39" Canvas. top = "16"> I am a source image </TextBlock> </Canvas>

The background code is omitted. refer to the previous background code implementation.

 

MatrixTransform

This book provides a detailed description of Matrix deformation: var polygon = new Polygon () {Fill = new SolidColorBrush (Color. fromRgb (0x01, 0x9A, 0xFF), Points = new PointCollection () {new Point () {X = 0, Y = 0}, new Point () {X = 0, Y = 50}, new Point () {X = 150, Y = 25 }}, RenderTransform = new TransformGroup () {Children = new TransformCollection () {new MatrixTransform () {Matrix = new Matrix () {M11 = 1, M12 = 0, M21 = 0, M22 = 1, offsetx= 150, offsetY = 100 }}}}; MainCanvas. children. add (polygon );

 

LayoutTransform and RenderTransform

There is no difference in the use of Canvas layout space with absolute positioning.

Other WPF controls are organized by Layout. LayoutTransform will affect the control Layout.

Example:

<StackPanel> <Rectangle Fill = "# 019AFF" Width = "150" Height = "50"> <Rectangle. renderTransform> <RotateTransform Angle = "50"> </RotateTransform> </Rectangle. renderTransform> </Rectangle> <Rectangle Fill = "# 019AFF" Width = "150" Height = "50"/> </StackPanel> </Window>

Modify RenderTransform to LayoutTransform: