WPF学习05：2D绘图使用Transform进行控件变形
在WPF学习04：2D绘图 使用Shape绘基本图形中，我们了解了如何绘制基本的图形。
这一次，我们进一步，研究如何将图形变形。
例子 一个三角形，经Transform形成组合图形：
XAML代码：
<Windowx: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"><CanvasName="MainCanvas"></Canvas></Window>
C#代码：
for(inti =0; i <36; i++)
{varpolygon =newPolygon()
{
Fill=newSolidColorBrush(Colors.LightBlue),
Points=newPointCollection() {newPoint() {X =0, Y =0},newPoint(){X =100, Y =5},newPoint(){X =0, Y =10}
}
};
polygon.RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{newRotateTransform(){ Angle = i *10}
}
};
Canvas.SetTop(polygon,100);
Canvas.SetLeft(polygon,200);
MainCanvas.Children.Add(polygon);
}
Shape简介 WPF提供了Transform类，使我们得以对控件进行变形操作。
Transform提供了TranslateTransform(平移变形) RotateTransform(旋转变形) ScaleTransform(缩放变形) SkewTransform(扭曲变形) MatrixTransform(矩阵变换变形)
回顾一下Shape的继承结构：
UIElement提供了RenderTransform
FrameworkElement提供了LayoutTransform
两者皆为Transform类型的属性，本文将逐个介绍各类变形的使用方法，最后将说明这两种Transform的区别。
TranslateTransform:
XAML实现：
<CanvasName="MainCanvas"><PolygonPoints="0,0 100,25 0,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="1 1"></Polygon><TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock><PolygonPoints="0,0 100,25 0,50"Fill="#019AFF"><Polygon.RenderTransform><TransformGroup><TranslateTransformX="50"Y="100"></TranslateTransform></TransformGroup></Polygon.RenderTransform></Polygon></Canvas>
后台代码实现：
varpolygon =newPolygon()
{
Fill=newSolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),
Points=newPointCollection()
{newPoint() {X =0, Y =0},newPoint(){X =100, Y =25},newPoint(){X =0, Y =50}
},
RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{newTranslateTransform(){X=50,Y=100}
}
}
};
MainCanvas.Children.Add(polygon);
RotateTransform
XAML实现:
<CanvasName="MainCanvas"><PolygonPoints="0,0 100,25 0,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="1 1"></Polygon><TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock><PolygonPoints="0,0 100,25 0,50"Fill="#019AFF"><Polygon.RenderTransform><TransformGroup><TranslateTransformX="250"Y="100"></TranslateTransform></TransformGroup></Polygon.RenderTransform></Polygon><PolygonPoints="0,0 100,25 0,50"Fill="#019AFF"><Polygon.RenderTransform><TransformGroup><TranslateTransformX="50"Y="100"></TranslateTransform><RotateTransformCenterX="50"CenterY="100"Angle="50"></RotateTransform></TransformGroup></Polygon.RenderTransform></Polygon></Canvas>
后台代码实现：
varpolygon =newPolygon()
{
Fill=newSolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),
Points=newPointCollection()
{newPoint() {X =0, Y =0},newPoint(){X =100, Y =25},newPoint(){X =0, Y =50}
},
RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{newTranslateTransform(){X=50,Y=100},newRotateTransform(){Angle=50, CenterX=50, CenterY=100}
}
}
};
注意，这里通过设置CenterX CenterY配置旋转的参考中心点，改点默认为(0, 0)
ScaleTransform
XAML实现:
<CanvasName="MainCanvas"><PolygonPoints="0,0 100,25 0,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="1 1"></Polygon><TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock><PolygonPoints="0,0 100,25 0,50"Fill="#019AFF"><Polygon.RenderTransform><TransformGroup><TranslateTransformX="50"Y="100"></TranslateTransform><ScaleTransformScaleX="0.5"ScaleY="0.5"></ScaleTransform></TransformGroup></Polygon.RenderTransform></Polygon><PolygonPoints="0,0 100,25 0,50"Fill="#019AFF"><Polygon.RenderTransform><TransformGroup><TranslateTransformX="50"Y="100"></TranslateTransform><ScaleTransformScaleX="1.5"ScaleY="1.5"></ScaleTransform></TransformGroup></Polygon.RenderTransform></Polygon></Canvas>
后台代码实现参考之前的代码，类似。
SkewTransform
XAML实现:
<CanvasName="MainCanvas"><PolygonPoints="0,0 100,25 0,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="1 1"></Polygon><TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock><PolygonPoints="0,0 100,25 0,50"Fill="#019AFF"><Polygon.RenderTransform><TransformGroup><SkewTransformAngleY="40"></SkewTransform></TransformGroup></Polygon.RenderTransform></Polygon></Canvas>
后台代码实现参考之前的代码，类似。
MatrixTransform
图形变换的本质都是将各个点，映射到一个齐次坐标系，然后乘上一个3X3的矩阵进行变换。
详细的内容这本书介绍的比较全：
这里只实现一个简单的矩阵实现平移：
实现代码：
varpolygon =newPolygon()
{
Fill=newSolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),
Points=newPointCollection()
{newPoint(){X=0, Y =0},newPoint(){X=0, Y =50},newPoint(){X=100, Y =25}
},
RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{newMatrixTransform()
{
Matrix=newMatrix()
{
M11=1, M12 =0,
M21=0, M22 =1,
OffsetX=150, OffsetY =100}
}
}
}
};
MainCanvas.Children.Add(polygon);
RenderTransform与LayoutTransform 对于Canvas这样使用绝对定位的Layout控件下的变形操作，两者的效果是一致的。
而在其它的布局控件中，LayoutTransform是会影响到布局的。
例子：
XAML代码：
<StackPanelName="MainCanvas"><PolygonPoints="0,0 150,25 0,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="1 1"><Polygon.LayoutTransform><RotateTransformAngle="50"></RotateTransform></Polygon.LayoutTransform></Polygon><PolygonPoints="0,0 150,25 0,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="1 1"></Polygon></StackPanel>
我们将LayoutTransform改为RenderTransform，结果如下: