通过上一篇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);
}
}
Transform简介
回顾一下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(矩阵变换变形)。
TranslateTransform
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);
RotateTransform
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)
ScaleTransform
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>
后台代码略,参考之前的后台代码实现即可。
SkewTransform
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>
后台代码略,参考之前的后台代码实现即可。
MatrixTransform
这本书对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);
LayoutTransform与RenderTransform
对于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：
时间： 2024-11-03 03:42:04