入门10-Transform(变换)的应用

接着介绍一下Silverlight变换（Transform）的应用

首先，说一下Silverlight支持的四种变形效果：
- 旋转效果  <RotateTransform... />
- 移动效果  <TranslateTransform.../ >
- 倾斜效果  <SkewTransform.../ >
- 缩放效果  <ScaleTransform.../ >

这些效果可以叠加使用，可以把各种变形效果声明放在<TransformGroup.../ >中。
四种变形效果的功能说明如下：
RotateTransform  通过<RotateTransform... />的Angle属性来旋转一个角度；
TranslateTransform 通过<TranslateTransform.../ >的X和Y属性来指定对象的位移量；
SkewTransform 通过 <SkewTransform.../ >的AngleX与AngleY属性来指定一个倾斜角度；
ScaleTransform 通过<ScaleTransform.../ >的ScaleX和ScaleY属性来指定放大与缩小的倍数；

变形效果适用对象类型(参考Silverlight 1.0 HELP文档)：
- 笔刷Brush
  - SolidColorBrush
  - LinearGradientBrush
  - RadialGradientBrush
  - ImageBrush
  - VideoBrush
- 几何对象Geometry
  - EllipseGeometry
  - LineGeometry
  - PathGeometry
  - RectangleGeometry
- UIElement
  - Canvas
  - Ellipse
  - Glyphs
  - Image
  - MediaElement
  - Retangle
  - Polygon
  - Polyline
  - Shape
  - TextBlock
  - Path
  - Line
  - InkPresener
  - Run

下面一一介绍这些变换效果的重要属性。
RotateTransform
==================================
Angle     旋转角度
CenterX   旋转中心点横坐标
CenterY   旋转中心点纵坐标
以上三属性值都是Double型的；
基本语法：
<RotateTransform Angle="Double" CenterX="Double" CenterY="Double" />
==================================

ScaleTransform
==================================
ScaleX    沿X轴缩放的倍数
ScaleY    沿Y轴缩放的倍数
CenterX   缩放中心点横坐标
CenterY   缩放中心点纵坐标
以上四属性值都是Double型的；
基本语法：
<ScaleTransform ScaleX="Double" ScaleY="Double" CenterX="Double" CenterY="Double" />
==================================

SkewTransform
==================================
AngleX    沿X轴倾斜角度
AngleY    沿Y轴倾斜角度
CenterX   缩放中心点横坐标
CenterY   缩放中心点纵坐标
以上四属性值都是Double型的
基本语法：
<SkewTransform AngleX="Double" AngleY="Double" CenterX="Double" CenterY="Double" />
==================================

TranslateTransform
==================================
X    沿X轴位移量
Y    沿Y轴位移量
以上两属性值都是Double型的
基本语法：
<TranslateTransform X="Double" Y="Double" />
==================================

以下给出相应几例代码：
代码1  RotateTransform效果
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Background="LightBlue" Width="300" Height="300">
        <TextBlock Name="myTextBlock1" Canvas.Left="60" Canvas.Top="65"
     FontFamily="Arial" FontStyle="Normal" FontSize="50" Foreground="silver"
     Width="300" Height="300" TextWrapping="Wrap">
     Microsoft  
     <TextBlock.RenderTransform>
         <RotateTransform Angle="45" CenterX="50" CenterY="50" />       
     </TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>
</Canvas>
==================================

ScaleTransform效果示例请参阅应用1-五星红旗
下面给出一ScaleTransform经典应用-倒影
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Canvas.Left="40" Canvas.Top="50">
        <!--TextBlock 1-->
        <TextBlock Text="Microsoft" Foreground="Blue" FontSize="50"/>
  <!--TextBlock 2-->
  <TextBlock Text="Microsoft" Foreground="silver" Canvas.Top="135" FontSize="50">
      <TextBlock.RenderTransform>
          <ScaleTransform ScaleY="-1"/>
      </TextBlock.RenderTransform>   
        </TextBlock>
    </Canvas>
</Canvas>
==================================

代码3  SkewTransform效果
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Name="parentCanvas">
        <!--Original Text-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Black" Canvas.Left="100" Canvas.Top="30" />
  <!--TextBlock 1-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Blue" Canvas.Left="120" Canvas.Top="80">
      <TextBlock.RenderTransform>
          <SkewTransform AngleX="-30"/>
      </TextBlock.RenderTransform>
  </TextBlock>
  <!--TextBlock 2-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Red" Canvas.Left="80" Canvas.Top="130">
      <TextBlock.RenderTransform>
          <SkewTransform AngleX="30"/>
      </TextBlock.RenderTransform>
  </TextBlock>
  <!--TextBlock 3-->
  <TextBlock Text="Microhoo" FontSize="30" Foreground="Orange" Canvas.Left="80" Canvas.Top="180">
      <TextBlock.RenderTransform>
          <SkewTransform AngleX="30" AngleY="15"/>
      </TextBlock.RenderTransform>
  </TextBlock>
        <!--TextBlock 4-->
        <TextBlock Text="Microhoo" FontSize="30" Foreground="silver" Canvas.Left="80" Canvas.Top="230">
      <TextBlock.RenderTransform>
          <SkewTransform AngleY="-45"/>
      </TextBlock.RenderTransform>
 </TextBlock>
        <!--TextBlock 5-->
        <TextBlock Text="Microhoo" FontSize="30" Foreground="purple" Canvas.Left="80" Canvas.Top="130">
      <TextBlock.RenderTransform>
          <SkewTransform AngleY="45"/>
      </TextBlock.RenderTransform>
  </TextBlock>
    </Canvas>
</Canvas>
==================================

代码4  TranslateTransform效果
==================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas >
        <!--Image Origion-->
        <Image Source="MyPic.jpg" Opacity="0.5">
            <Image.RenderTransform>
          <TranslateTransform X="0" Y="0"/>
      </Image.RenderTransform>
        </Image>
        <!--Image Transalte-->
        <Image Source="MyPic.jpg" >
            <Image.RenderTransform>
                <TranslateTransform X="100" Y="100"/>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Canvas>
==================================
将以上四段代码，依次粘贴到入门1中的myxaml.xaml中，后双击SampleHTMLPage.html运行，即可看到结果。

我们也可以把多种变换效果放在一个效果群组中组合起来使用，这里使用TransformGroup来声明多个效果。
<TransformGroup>
    <RotateTransform... />
    <SkewTransform... />
    <TranslateTransform... />
    <ScaleTransform... />
</TransformGroup>
大家可以试着将上述几例修改后运行，看看组合效果的威力。

最后再介绍一个比较复杂的变换效果，叫做矩阵变换效果(MatrixTransform)。
实质上，所有的变换效果都是衍生于变换矩阵(Matrix)，此矩阵是一3*3矩阵。各参数如下：

################################
M11               M12                           
Default: 1.0     Default: 0.0      0.0
################################
M12               M22                          
Default: 0.0     Default: 1.0      0.0        
################################
OffsetX           OffsetY                      
Default: 0.0     Default: 0.0      1.0        
################################

其中第三列,0.0,0.0,1.0为常数列，这是因为Silverlight只支持仿射变换（affine transform），所以最后一列总是：0 0 1
通过以上矩阵信息我们可以验证得知，其实TranslateTransform效果相当于下列矩阵效果：
1        　　 0             0
0       　　   1             0
OffsetX        OffsetY    1
其中OffsetX控制X轴的坐标位移，OffsetY控制Y轴的坐标位移

ScaleTransform效果相当于下列矩阵效果：
M11    0       　0
0     　M22      0
0     　0      　 1
其中M11控制ScaleX，M22控制ScaleY

RotateTransform相当于下列矩阵效果：
cos(a)   sin(a)   0
sin(-a)   cos(a)  0
0           0        1
a是设置的旋转角度

SkewTransform相当于下列矩阵效果：
SkewX效果:
1          0    0
tan(a)   1    0
0          0    1

SkewY效果:
1   tan(a) 0
0   1      0
0   0      1
其中a是Skew的角度
大家可以设置不同的效果进行验证

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　锐意进取  大胆创新
                                        　　　　　　　　　　　　　　　　　　　　　　蒙哥马利 朱