标签：
通过上一篇WPF学习WPF学习04：2D绘图之Shape我们可以进行基本图形的绘制。
涉及到图形应用编程，仅仅绘制基本的图形当然是不够的，我们可以借助WPF提供的Transform类，对控件进行变形操作。
由一个三角形旋转而成的组合图形：
后台代码：
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); } }
回顾一下Shape的继承树：
所有的WPF控件基本都继承于UIElement与FrameworkElement 。
UIElement提供了布局后渲染的Transform属性：
FrameworkElement提供了布局前渲染的Transform属性：
public Transform LayoutTransform { get; set; } public Transform RenderTransform { get; set; }
通过配置控件的这两个属性，我们就可以对控件进行各类变形。
我们先了解各类变形的使用方法，最后在回来说明两个属性的区别。
WPF提供了5种变形方法：TranslateTransform(位移变形) RotateTransform(旋转变形) ScaleTransform(缩放变形) SkewTransform(扭曲变形) MatrixTransform(矩阵变换变形)。
XAML实现：
<Canvas Name="MainCanvas"> <Rectangle Width="150" Height="50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"/> <TextBlock Canvas.Left="39" Canvas.Top="16">我是原图形</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> <TranslateTransform X="150" Y="60"></TranslateTransform> </Rectangle.RenderTransform> </Rectangle> </Canvas>
后台代码实现：
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);
XAML实现:
<Canvas Name="MainCanvas"> <Polygon Points="0,0 0,50 150,25" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"/> <Polygon Points="0,0 0,50 150,25" Fill="#019AFF"> <Polygon.RenderTransform> <TransformGroup> <RotateTransform Angle="45"></RotateTransform> </TransformGroup> </Polygon.RenderTransform> </Polygon> <TextBlock Canvas.Left="39" Canvas.Top="16">我是原图形</TextBlock> <Polygon Points="0,0 0,50 150,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>
后台代码实现：
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);
注意：这里的CenterX 与 CenterY指定了旋转中心点，默认位于(0,0)
XAML实现:
<Canvas Name="MainCanvas"> <Polygon Points="0,0 0,50 150,25" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"/> <Polygon Points="0,0 0,50 150,25" Fill="#019AFF"> <Polygon.RenderTransform> <TransformGroup> <TranslateTransform X="100"></TranslateTransform> <ScaleTransform ScaleX="2"></ScaleTransform> </TransformGroup> </Polygon.RenderTransform> </Polygon> <TextBlock Canvas.Left="39" Canvas.Top="16">我是原图形</TextBlock> <Polygon Points="0,0 0,50 150,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,0 0,50 150,25" 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>
后台代码略,参考之前的后台代码实现即可。
XAML实现:
<Canvas Name="MainCanvas"> <Polygon Points="0,0 0,50 150,25" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"/> <Polygon Points="0,0 0,50 150,25" Fill="#019AFF"> <Polygon.RenderTransform> <TransformGroup> <SkewTransform AngleY="30"></SkewTransform> </TransformGroup> </Polygon.RenderTransform> </Polygon> <TextBlock Canvas.Left="39" Canvas.Top="16">我是原图形</TextBlock> </Canvas>
后台代码略,参考之前的后台代码实现即可。
这本书对Matrix变形给了详细的说明：
说起来比较多，就不再本文说明了，直接给个例子：
实现平移，后台代码:
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);
对于Canvas这样使用绝对定位的布局空间，两者在使用上是没区别的。
而其它的WPF提供Layout组织的控件，LayoutTransform将会影响控件布局。
例子：
XAML代码：
<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>
修改RenderTransform为LayoutTransform：
标签：
原文地址：http://www.cnblogs.com/E-WALKER/p/4383808.html
