Silverlight图形:变换 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【meiwen.anslib.com - 电脑资料】

您可以在 Silverlight 中使用二维 (2-D) Transform. 类来旋转、按比例缩放、扭曲和移 动(平移)对象,

Silverlight图形:变换

。下面的示例应用了可以旋转和扭曲一行文本的变换。

XAML


 
  
   
    
    
   
  

 

什么是变换?

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 度,

电脑资料

Silverlight图形:变换》(http://meiwen.anslib.com)。

XAML


     Fill="RoyalBlue">
  
   
  

 

下图显示了旋转的效果。

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

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

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

XAML


 
  
   
  

 

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

对变换进行动画处理

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

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

XAML


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

     MouseLeftButtonDown="StartAnimation">
  
   
  

 

VB

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

交互式变换

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

XAML


     Width="50" Height="50" Fill="RoyalBlue">
  

   
   
  

 

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。例如,您可以 制造这样一个假象,即对象朝向您或远离您进行旋转,如下图中所示。

使用透视转换的图像

最新文章