WPF learning 05: 2D drawing controls Deformation Using Transform, wpftransform

WPF learning 05: 2D drawing controls Deformation Using Transform, wpftransform

In WPF learning 04: 2D drawing using Shape to draw basic graphics, we learned how to draw basic graphics.

This time, we further study how to deform the image.

Example

A triangle formed by Transform:

<Window x: Class = "Transforms. mainWindow "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "525" Loaded = "Window_Loaded"> <Canvas Name = "MainCanvas"> </Canvas> </ window>

 

C # code:

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);}

Shape Introduction

WPF provides a Transform class that allows us to perform deformation operations on controls.

Transform provides the TranslateTransform (translation deformation) RotateTransform (rotation deformation) ScaleTransform (scaling deformation) SkewTransform (Distortion deformation) MatrixTransform (matrix transformation deformation)

Review the inherited structure of Shape:

TranslateTransform:

<Canvas Name = "MainCanvas"> <Polygon Points = "," Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"> </Polygon> <TextBlock canvas. top = "15" Canvas. left = "2"> I am the original image </TextBlock> <Polygon Points = ", 25," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "50" Y = "100"> </TranslateTransform> </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 = 100, Y = 25},        new Point(){X = 0, Y = 50}    },    RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {            new TranslateTransform(){X=50,Y=100}        }    }};MainCanvas.Children.Add(polygon);

 

RotateTransform

 

XAML implementation:

<Canvas Name = "MainCanvas"> <Polygon Points = "," Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"> </Polygon> <TextBlock canvas. top = "15" Canvas. left = "2"> I am the original image </TextBlock> <Polygon Points = ", 25," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "250" Y = "100"> </TranslateTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> <Polygon Points = "," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "50" Y = "100"> </TranslateTransform> <RotateTransform CenterX = "50" CenterY = "100" Angle = "50"> </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 = 100, Y = 25},        new Point(){X = 0, Y = 50}    },    RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {            new TranslateTransform(){X=50,Y=100},            new RotateTransform(){Angle=50, CenterX=50, CenterY=100}        }    }};

Note: Set CenterX CenterY to configure the reference center for rotation. The default value is (0, 0)

 

ScaleTransform

<Canvas Name = "MainCanvas"> <Polygon Points = "," Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"> </Polygon> <TextBlock canvas. top = "15" Canvas. left = "2"> I am the original image </TextBlock> <Polygon Points = ", 25," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "50" Y = "100"> </TranslateTransform> <ScaleTransform ScaleX = "0.5" ScaleY = "0.5"> </ScaleTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> <Polygon Points = "," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <TranslateTransform X = "50" Y = "100"> </TranslateTransform> <ScaleTransform ScaleX = "1.5" ScaleY = "1.5"> </ScaleTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> </Canvas>

For background code implementation, see the previous code.

 

SkewTransform

<Canvas Name = "MainCanvas"> <Polygon Points = "," Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"> </Polygon> <TextBlock canvas. top = "15" Canvas. left = "2"> I am the original image </TextBlock> <Polygon Points = ", 25," Fill = "# 019AFF"> <Polygon. renderTransform> <TransformGroup> <SkewTransform AngleY = "40"> </SkewTransform> </TransformGroup> </Polygon. renderTransform> </Polygon> </Canvas>

For background code implementation, see the previous code.

 

MatrixTransform

The essence of graph transformation is to map all points to an homogeneous coordinate system, and then multiply a 3x3 matrix for transformation.

Details: 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 = 100, 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 );

 

RenderTransform and LayoutTransform

The effects of deformation operations under the Layout control that uses absolute positioning such as Canvas are the same.

In other layout controls, LayoutTransform will affect the layout.

Example: <StackPanel Name = "MainCanvas"> <Polygon Points = "," Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"> <Polygon. layoutTransform> <RotateTransform Angle = "50"> </RotateTransform> </Polygon. layoutTransform> </Polygon> <Polygon Points = "," Stroke = "Black" StrokeThickness = "2" StrokeDashArray = "1"> </Polygon> </StackPanel>

Change LayoutTransform to RenderTransform. The result is as follows: