两种方法设置图形元素的RenderTransform属性

RenderTransform属性让你可以使用transform对象对一个元素进行旋转,倾斜,缩放及偏移操作.共有下面几种不同的transform对象:

• RotateTransform: 以指定角度旋转对象.
• SkewTransform: 对对象进行倾斜操作.
• ScaleTransform: 对对象进行放大或者缩小操作.
• TranslateTransform: 使对象从原坐标偏移.

此外,还有一种特殊类型的transform对象: TransformGroup.使用它,可以对一个对象应用多用操作.

下面是SDK中的例子,代码如下:

 

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
  <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
      Fill="Black">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
      Fill="red">
    <Rectangle.RenderTransform>
      <SkewTransform AngleX="30"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
      Fill="blue">
    <Rectangle.RenderTransform>
      <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
      Fill="Green">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="45"/>
        <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
        <SkewTransform AngleX="30"/>
      </TransformGroup>
    </Rectangle.RenderTransform>
  </Rectangle>
  </Canvas> 

效果图如下图所示:

    这里是直接在XAML中设置,其实,除此之外还可以用JS函数进行设置.下面给出简单的示例代码:

 

     var sTransformG = '<TransformGroup/>';

    var oTransformG = oHost.createFromXaml(sTransformG);

    var sTransformCollection = '<TransformCollection/>';
    var oTransformCollection = oHost.createFromXaml(sTransformCollection);

    var sRotateTransform = '<RotateTransform/>';
    var oRotateTransform = oHost.createFromXaml(sRotateTransform);
    oRotateTransform.Angle = 50;

    oTransformCollection.Add(oRotateTransform);

    var sScaleTransform = '<ScaleTransform/>';
    var oScaleTransform = oHost.createFromXaml(sScaleTransform);
    oScaleTransform.ScaleX = 5;
    oScaleTransform.ScaleY = 5;

    oTransformCollection.Add(oScaleTransform);

    oTransformG.Children = oTransformCollection;
    oObject.RenderTransform = oTransformG;