你的位置:首页 > ASP.net教程

[ASP.net教程]WPF学习05:2D绘图之Transform


    通过上一篇WPF学习WPF学习04:2D绘图之Shape我们可以进行基本图形的绘制。

    涉及到图形应用编程,仅仅绘制基本的图形当然是不够的,我们可以借助WPF提供的Transform类,对控件进行变形操作。

 

例子

    由一个三角形旋转而成的组合图形:

    imageimage

    后台代码:

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的继承树:

    image

    所有的WPF控件基本都继承于UIElement与FrameworkElement 。

    UIElement提供了布局后渲染的Transform属性:

    image

    FrameworkElement提供了布局前渲染的Transform属性:

    image

public Transform LayoutTransform { get; set; }public Transform RenderTransform { get; set; }

 通过配置控件的这两个属性,我们就可以对控件进行各类变形。
 我们先了解各类变形的使用方法,最后在回来说明两个属性的区别。

    WPF提供了5种变形方法:TranslateTransform(位移变形) RotateTransform(旋转变形) ScaleTransform(缩放变形) SkewTransform(扭曲变形) MatrixTransform(矩阵变换变形)。


 

TranslateTransform

    image

    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

 

    image

   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

    image

    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

image

    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变形给了详细的说明:image

    说起来比较多,就不再本文说明了,直接给个例子:

    image

    实现平移,后台代码:

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将会影响控件布局。

    例子:

    image

    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:

     image