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