Silverlight 图形：变换

您可以在 Silverlight 中使用二维 (2-D) Transform
类来旋转、按比例缩放、扭曲和移动（平移）对象。下面的示例应用了可以旋转和扭曲一行文本的变换。

　　XAML

<StackPanel>　
　<TextBlock　FontSize="28"　Text="Hello">　
　　<TextBlock.RenderTransform>　
　　　<TransformGroup>　
　　　　<RotateTransform　Angle="45"　/>　
　　　　<SkewTransform　CenterX="0"　CenterY="0"　AngleX="60"/>　
　　　</TransformGroup>　
　　</TextBlock.RenderTransform>　
　</TextBlock>　
</StackPanel>　
　

　　什么是变换？

　　Transform 定义如何将一个坐标空间中的点映射或变换到另一个坐标空间。此映射由变换 Matrix（一个三行三列的 Double
值集合）来描述。

说明：

　　Silverlight 使用行优先矩阵。矢量用行矢量（而不是列矢量）表示。

　　下表显示了 Silverlight 矩阵的结构。

M11 　　默认值：1.0	M12 　　默认值：0.0	0.0
M21 　　默认值：0.0	M22 　　默认值：1.0	0.0
OffsetX 　　默认值：0.0	OffsetY 　　默认值：0.0	1.0

　　通过处理矩阵值，您可以旋转、按比例缩放、扭曲和移动（平移）对象。例如，如果将第三行第一列中的值（OffsetX 值）更改为 100，则可以将某一对象沿
x 轴移动 100 个单位。如果将第二行第二列中的值更改为 3，您可以将某一对象拉伸为其当前高度的三倍。如果同时更改两个值，则可将对象沿 x 轴移动 100
个单位并将其高度拉伸为原来的 3 倍。由于 Silverlight 仅支持仿射变换，因此右列中的值始终为 0、0、1。

　　尽管 Silverlight 使您能够直接处理矩阵值，但它还提供了许多 Transform
类，您可以使用这些类来变换对象，而无需了解基础矩阵结构的配置方式。例如，利用 ScaleTransform 类，您可以通过设置对象的 ScaleX 和
ScaleY 属性来按比例缩放对象，而不用处理变换矩阵。同样，利用 RotateTransform 类，您只需通过设置对象的 Angle
属性即可旋转对象。

　　变换类

　　Silverlight 为常见变换操作提供了以下二维 Transform 类。

类	说明	Illustration
RotateTransform	按指定的 Angle 旋转元素。
ScaleTransform	按指定的 ScaleX 和 ScaleY 量按比例缩放元素。
SkewTransform	按指定的 AngleX 和 AngleY 量扭曲元素。
TranslateTransform	按指定的 X 和 Y 量移动（平移）元素。

　　为了创建更复杂的变换，Silverlight 提供了如下两个类。

类	说明
TransformGroup	将多个 TransformGroup 对象组合为可以随后应用于变换属性的单一 Transform。
MatrixTransform	创建其他 Transform 类未提供的自定义变换。在使用 MatrixTransform 时，将直接处理矩阵。

　　常见变换属性

　　变换对象的一种方法是声明适当的 Transform 类型，并将其应用于对象的变换属性。不同类型的对象具有不同类型的变换属性。下表列出了若干常用的
Silverlight 类型及其变换属性。

类型	变换属性
Brush	Transform,RelativeTransform
Geometry	Transform
UIElement	RenderTransform

　　变换和坐标系

　　在变换对象时，您不仅仅是变换对象，您变换的是对象所在的坐标系。默认情况下，变换将以目标对象坐标系的原点 (0,0) 为中心进行。唯一的例外是
TranslateTransform，该对象没有要设置的中心属性，因为不管以何处为中心，平移效果都相同。

　　下面的示例使用 RotateTransform，围绕其默认中心 (0, 0) 将 Rectangle 元素（一种 UIElement）旋转 45
度。

　　XAML

<Grid　x:Name="LayoutRoot"　Background="White">　
　<Rectangle　Width="50"　Height="50"　
　　Fill="RoyalBlue">　
　　<Rectangle.RenderTransform>　
　　　<RotateTransform　Angle="45"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</Grid>　
　

　　下图显示了旋转的效果。

　　围绕点 (0,0) 旋转 45 度的矩形元素

　　默认情况下，元素将围绕其左上角 (0, 0) 旋转。RotateTransform、ScaleTransform 和 SkewTransform
类提供 CenterX 和 CenterY 属性，可以利用这些属性来指定变换的应用点。

　　下一个示例也使用 RotateTransform 将 Rectangle 元素旋转 45 度；但是，这一次设置了 CenterX 和 CenterY
属性，因此 RotateTransform 的中心为 (25, 25)。

　　XAML

<StackPanel>　
　<Rectangle　Width="50"　Height="50"　Fill="RoyalBlue">　
　　<Rectangle.RenderTransform>　
　　　<RotateTransform　Angle="45"　CenterX="25"　CenterY="25"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</StackPanel>　
　

　　围绕点 (25,25) 旋转 45 度的矩形元素

　　对变换进行动画处理

　　可以对 Transform 对象进行动画处理。若要对 Transform 进行动画处理，请将类型兼容的动画应用于想要进行动画处理的属性。

　　下面的示例将 Storyboard 和 DoubleAnimation 与 RotateTransform 一起使用，以便使 Rectangle
旋转到位。

　　XAML

<StackPanel　Margin="15">　
　<StackPanel.Resources>　
　　<Storyboard　x:Name="myStoryboard">　
　　　<DoubleAnimation　
　　　　Storyboard.TargetName="myTransform"　
　　　　Storyboard.TargetProperty="Angle"　
　　　　From="0"　To="360"　Duration="0:0:5"　
　　　　RepeatBehavior="Forever"　/>　
　　</Storyboard>　
　</StackPanel.Resources>　
　<Rectangle　Width="50"　Height="50"　Fill="RoyalBlue"　
　　MouseLeftButtonDown="StartAnimation">　
　　<Rectangle.RenderTransform>　
　　　<RotateTransform　x:Name="myTransform"　Angle="45"　CenterX="25"　CenterY="25"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</StackPanel>　
　

　　VB

Private　Sub　StartAnimation(ByVal　sender　As　Object,　ByVal　e　As　MouseEventArgs)
　　　　myStoryboard.Begin()
End　Sub

　　交互式变换

　　可以使用代码访问和操作 Transform 对象。实现这个目标的一种方法是命名 Transform，然后使用代码访问。下面的示例演示每次单击
Rectangle 时，如何增加应用于 Rectangle 的 ScaleTransform 的 ScaleX 和 ScaleY 属性值。

　　XAML

<StackPanel>　
　<Rectangle　MouseLeftButtonDown="HandleMouseButtonDown"　
　　Width="50"　Height="50"　Fill="RoyalBlue">　
　　<Rectangle.RenderTransform>　
　
　　　<!--　If　you　give　the　transform　a　name　you　can　
　　　　Access　it　easily　from　code.　-->　
　　　<ScaleTransform　x:Name="myScaleTransform"　/>　
　　</Rectangle.RenderTransform>　
　</Rectangle>　
</StackPanel>　
　

　　VB

Private　Sub　HandleMouseButtonDown(ByVal　sender　As　Object,　ByVal　e　As　MouseButtonEventArgs)　
　　'　Increase　ScaleX　and　ScaleY　by　25%.　
　　myScaleTransform.ScaleX　=　(myScaleTransform.ScaleX　*　1.25)　
　　myScaleTransform.ScaleY　=　(myScaleTransform.ScaleY　*　1.25)　
End　Sub　
　

　　三维转换

　　您可以使用"透视转换"来将三维效果应用于任何 Silverlight
UIElement。例如，您可以制造这样一个假象，即对象朝向您或远离您进行旋转，如下图中所示。

　　使用透视转换的图像