书名：WPF专业编程指南
作者：李应保
出版社：电子工业出版社
出版时间：2010-01
ISBN：9787121100116

第14章 图形转换

一、位移转换

• 位移是一个简单的转换，在平面上进行位移转换，实际上是改变图形元素的位置坐标（x, y）。
  如图形元素原来在（x0 ,y0)处，那么，当在x方向移动dx，在y方向移动dy时，图形将在新的位置：x = x0 +dx;y = y0 +dy;
  这里dx和dy可以是负数，当dx和dy为负数时，图形对象向左上方移动。

• 使用位移转换移动矩形：

  <StackPanel x:Class="Yingbao.Chapter14.TranslatesRectangle"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Height ="340" Width ="450">
  <Grid Width="400" Height="52" HorizontalAlignment="Left"
        VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="3*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Label Padding ="2,2,10,2" Grid.Column="0">X方向移动:</Label>
    <ScrollBar Name="xScroll" Orientation="Horizontal"
        Minimum="-200" Maximum="300" Grid.Column="1"/>
    <TextBox  Margin ="2,2,10,2" Grid.Column="2"
        Text="{Binding ElementName=xScroll, Path=Value}" />
    <Label Padding ="2,2,10,2" Grid.Column="0"
        Grid.Row="1">Y方向移动:</Label>
    <ScrollBar Name="yScroll" Orientation="Horizontal"
        Minimum="-200" Maximum="300" Grid.Column="1"
        Grid.Row="1"/>
    <TextBox Name ="rotateCenter"    Margin ="2,2,10,2"
        Text="{Binding  ElementName=yScroll, Path=Value}"
        Grid.Column="2"  Grid.Row="1"/>
  </Grid>
  <Border Margin="10" BorderBrush="Black" BorderThickness="1"
            Background="{StaticResource YingbaoBlueGridBrush}"
            HorizontalAlignment="Left">
    <Canvas ClipToBounds="True" Width="380" Height="250">
    <TextBlock Canvas.Top="63" Canvas.Left="90" Text="开始位置:"/>
        <Rectangle Canvas.Top="80" Canvas.Left="100"
            Width="100" Height="70" Stroke="Black"
            StrokeThickness="1" StrokeDashArray="4,2,1"/>
      <Rectangle Canvas.Top="80" Canvas.Left="100"
            Width="100" Height="70" Stroke="Red"
            StrokeThickness="3" Fill="LightBlue">
        <Rectangle.RenderTransform>
          <TranslateTransform
            X="{Binding ElementName=xScroll, Path=Value}"
            Y="{Binding ElementName=yScroll, Path=Value}"/>
        </Rectangle.RenderTransform>
      </Rectangle>
      </Canvas>
  </Border>
  </StackPanel >

图14-5 使用位移转换移动矩形

二、缩放转换（ScaleTransform）

• 放大缩小是图形软件中常用的操作，我们可以单独放大或缩小视窗中某个元素，而不必管理视窗中的其他元素。
  缩放操作使用两个参数：放大/缩小倍数和缩放中心位置。
  若用Px表示X轴方向的缩放倍数，用Py表示Y轴方向的缩放倍数，用（Cx,Cy）表示缩放中心，那么图形上的任何一点（x,y)转换后的坐标(Xt,Yt)为：
  Xt=Px( x- Cx ) + Cx ;
  Yt=Py( y- Cy) + Cy;
  若缩放倍数大于1，图形是放大的；若小于1，图形是缩小的。
  缩放倍数也可以是负数。当缩放倍数为负数时，所生成的图形称为原图形的镜像。

  <StackPanel
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Yingbao.Chapter14.ScaleRectangle" Height ="500"
        Width ="450">
  <Grid Width="400" Height="104"
        HorizontalAlignment="Left" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="3*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Label Padding ="2,2,10,2" Grid.Column="0">X方向缩放:</Label>
    <ScrollBar Name="xScroll" Orientation="Horizontal"
        Minimum="0.1" Maximum="2" Grid.Column="1"/>
    <TextBox  Margin ="2,2,10,2" Grid.Column="2"
        Text="{Binding ElementName=xScroll, Path=Value}" />
    <Label Padding ="2,2,10,2" Grid.Column="0"
        Grid.Row="1">Y方向缩放:</Label>
    <ScrollBar Name="yScroll" Orientation="Horizontal"
        Minimum="0.1" Maximum="2" Grid.Column="1" Grid.Row="1"/>
    <TextBox    Margin ="2,2,10,2"
        Text="{Binding ElementName=yScroll, Path=Value}"
        Grid.Column="2"  Grid.Row="1"/>
    <Label Padding ="2,2,10,2" Grid.Column="0"
        Grid.Row="2">X中心:</Label>
    <ScrollBar Name="xcenter" Orientation="Horizontal"
      Minimum="-100" Maximum="100" Grid.Column="1" Grid.Row="2"/>
    <TextBox Margin ="2,2,10,2"
        Text="{Binding ElementName=xcenter, Path=Value}"
        Grid.Column="2"  Grid.Row="2"/>
    <Label Padding ="2,2,10,2" Grid.Column="0"
        Grid.Row="3">Y中心:</Label>
    <ScrollBar Name="ycenter" Orientation="Horizontal"
        Minimum="-100" Maximum="100" Grid.Column="1" Grid.Row="3"/>
    <TextBox Margin ="2,2,10,2" Grid.Column="2"  Grid.Row="3"
          Text="{Binding ElementName=ycenter, Path=Value}"  />
  </Grid>
  <Border Margin="10" BorderBrush="Black" BorderThickness="1"
            Background="{StaticResource YingbaoBlueGridBrush}"
            HorizontalAlignment="Left">
    <Canvas ClipToBounds="True" Width="380" Height="250">
      <TextBlock Canvas.Top="63" Canvas.Left="90"
            Text="开始位置："/>
        <Rectangle Canvas.Top="80" Canvas.Left="100"
            Width="100" Height="70" Stroke="Black"
            StrokeThickness="1" StrokeDashArray="4,2,1"/>
      <Rectangle Canvas.Top="80" Canvas.Left="100"
            Width="100" Height="70" Stroke="Red"
            StrokeThickness="3" Fill="LightBlue">
        <Rectangle.RenderTransform>
          <ScaleTransform
            ScaleX="{Binding ElementName=xScroll, Path=Value}"
            ScaleY="{Binding ElementName=yScroll, Path=Value}"
            CenterX="{Binding ElementName=xcenter, Path=Value}"
            CenterY="{Binding ElementName=ycenter, Path=Value}"/>
        </Rectangle.RenderTransform>
      </Rectangle>
      </Canvas>
  </Border>
  </StackPanel >

图14-6 缩放转换矩形