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>
扩展:
- 请注意,在元素上建立的触发器的集合只支持 EventTrigger,而不支持属性触发器 ( Trigger)。
- 如果需要属性触发器,必须将他们置于样式(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;
扩展:
- MatrixTransform 在 二维 x-y 平面中进行变换时使用 3x3 矩阵。 将仿射矩阵变换相乘可形成线性变换,例如先旋转扭曲,然后再平移。仿射矩阵变换的最后一列等于 (0, 0, 1),因此只需指定前两列的成员。最后一行的成员 OffsetX 和 OffsetY 表示平移值。
- 虽然可以使用 Matrix 结构直接平移各个点或使用 MatrixTransform 转换对象,但 WPF 还提供了一组类,使用它们可以转换对象而无需直接使用矩阵: RotateTransform、 ScaleTransform、 SkewTransform 和 TranslateTransform。