WPF学习05：2D绘图之Transform

通过上一篇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：