WPF：Graphics绘图--Transformations转换--2DTransforms2D转换

2DTransforms2D转换

• 文件结构：

• 页面结构：

使用Frame 内容控件提供导航和显示内容能力。

<TabItem Header="RotateTransform Example">
    <Frame Background="White" Source="RotateTransformExample.xaml" />
</TabItem>

<TabItem Header="ScaleTransform Example">
    <TabControl>
        <TabItem Header="Basic Examples">
            <Frame Background="White" Source="ScaleTransformExample.xaml" />
        </TabItem>
        <TabItem Header="Animation Example">
            <Frame Background="White" Source="AnimatedScaleTransformExample.xaml" />
        </TabItem>
    </TabControl>
</TabItem>

• TransformExample

实现效果：
RotateTransform：围绕指定点按照顺时针方向旋转对象及动画

<TextBlock Canvas.Top="100" Canvas.Left="50"
    TextAlignment="Center" FontSize="16pt" Foreground="#CCCCFF"
    RenderTransformOrigin="0.5,0.5">
    <TextBlock.RenderTransform>
      <RotateTransform x:Name="MyAnimatedRotateTransform" Angle="0" />
    </TextBlock.RenderTransform>
    RotateTransform
</TextBlock>

围绕旋转角度属性值Angle 进行动画效果：

<DoubleAnimation 
    Storyboard.TargetName="MyAnimatedRotateTransform" 
    Storyboard.TargetProperty="Angle" 
    From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />

ScaleTransform：沿水平或垂直方向拉伸或收缩对象。

<ScaleTransform x:Name="MyAnimatedScaleTransform" ScaleX="1" ScaleY="1" />

ScaleX 属性指定使对象沿 x 轴拉伸或收缩的量， ScaleY 属性指定使对象沿 y 轴拉伸或收缩的量。
以下对ScaleX、ScaleY 并行运行 属性动画

<ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
    <DoubleAnimation 
      Storyboard.TargetName="MyAnimatedScaleTransform" 
      Storyboard.TargetProperty="ScaleX"
      From="0" To="3" Duration="0:0:7" />
    <DoubleAnimation 
      Storyboard.TargetName="MyAnimatedScaleTransform" 
      Storyboard.TargetProperty="ScaleY"          
      From="0" To="3" Duration="0:0:7" />     
  </ParallelTimeline>

SkewTransform 可用于在 二维 对象中创建三维深度幻觉。即扭曲元素，是一种以非均匀方式拉伸坐标空间的变换。

TranslateTransform ：二维 x-y 坐标系中平移（移动）对象。
TranslateTransform 类对移动不支持绝对定位的面板内的元素特别有用。 例如，通过将 TranslateTransform 应用到元素的 RenderTransform 属性，可以移动 StackPanel 或 DockPanel 内的元素。

根元素页面上触发方法：

<Page.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard>
        <Storyboard>
        ...
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
</Page.Triggers>

扩展：

1. 请注意，在元素上建立的触发器的集合只支持 EventTrigger，而不支持属性触发器 ( Trigger)。
2. 如果需要属性触发器，必须将他们置于样式(style)或模板(template)中，然后将此样式或模板通过Style 特性直接赋值，或者使用间接地隐式样式引用。

• RotateTransformExample旋转示例

停止按钮触发停止动画事件：

<EventTrigger RoutedEvent="Button.Click" SourceName="stopButton">
    <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
</EventTrigger>

绑定到text输入值，进行旋转变换：

<Canvas Height="200" Width="200">
  <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
    Canvas.Left="75" Canvas.Top="50">
    <Polyline.RenderTransform>
      <RotateTransform x:Name="interactiveRotateTransform" 
        CenterX="{Binding Path=Text, ElementName=centerXTextBox}" 
        CenterY="{Binding Path=Text, ElementName=centerYTextBox}" 
        Angle="{Binding Path=Text, ElementName=angleTextBox}"/>
    </Polyline.RenderTransform>
  </Polyline>
  
  <!-- Shows the original position of the polyline. -->
  <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10"
    Opacity="0.25" Canvas.Left="75" Canvas.Top="50" />           
</Canvas>

• ScaleTransformExample

同理以下为设置参数方框缩放效果图：

• SkewTransformExample

• Interactive MatrixTransform Example

MatrixTransform ：创建一个任意仿射矩阵变换，用于操作二维平面中的对象或坐标系。

实例化一个MatrixTransform对象

<Rectangle Name="transformedRectangle"
  Canvas.Top="100" Canvas.Left="100"
  Fill="{StaticResource MyGreenGridBrushResource}" Stroke="Black" StrokeThickness="2"
  Height="100" Width="100">
  <Rectangle.RenderTransform>
    <MatrixTransform x:Name="myMatrixTransform"/>
  </Rectangle.RenderTransform>
</Rectangle>

后台应用：

var myMatrix = new Matrix
{
    M11 = double.Parse(M11TextBox.Text),
    M12 = double.Parse(M12TextBox.Text),
    M21 = double.Parse(M21TextBox.Text),
    M22 = double.Parse(M22TextBox.Text),
    OffsetX = double.Parse(OffsetXTextBox.Text),
    OffsetY = double.Parse(OffsetYTextBox.Text)
};
myMatrixTransform.Matrix = myMatrix;

扩展：

1. MatrixTransform 在 二维 x-y 平面中进行变换时使用 3x3 矩阵。 将仿射矩阵变换相乘可形成线性变换，例如先旋转扭曲，然后再平移。仿射矩阵变换的最后一列等于 (0, 0, 1)，因此只需指定前两列的成员。最后一行的成员 OffsetX 和 OffsetY 表示平移值。
2. 虽然可以使用 Matrix 结构直接平移各个点或使用 MatrixTransform 转换对象，但 WPF 还提供了一组类，使用它们可以转换对象而无需直接使用矩阵： RotateTransform、 ScaleTransform、 SkewTransform 和 TranslateTransform。