zoukankan      html  css  js  c++  java
  • 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 使用行优先矩阵。矢量用行矢量(而不是列矢量)表示。

      下表显示了 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 旋转元素。Silverlight 图形:变换
      ScaleTransform  按指定的 ScaleX 和 ScaleY 量按比例缩放元素。Silverlight 图形:变换
      SkewTransform  按指定的 AngleX 和 AngleY 量扭曲元素。Silverlight 图形:变换
      TranslateTransform  按指定的 X 和 Y 量移动(平移)元素。Silverlight 图形:变换

      为了创建更复杂的变换,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 度的矩形元素


    Silverlight 图形:变换


      默认情况下,元素将围绕其左上角 (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 度的矩形元素


    Silverlight 图形:变换


      对变换进行动画处理


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


      使用透视转换的图像


    Silverlight 图形:变换

  • 相关阅读:
    函数式宏定义与普通函数
    linux之sort用法
    HDU 4390 Number Sequence 容斥原理
    HDU 4407 Sum 容斥原理
    HDU 4059 The Boss on Mars 容斥原理
    UVA12653 Buses
    UVA 12651 Triangles
    UVA 10892
    HDU 4292 Food
    HDU 4288 Coder
  • 原文地址:https://www.cnblogs.com/zziss/p/2771748.html
Copyright © 2011-2022 走看看