乱弹琴 Silverlight 2.0 (16) 图像变换(Transform)

前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴Silverlight 2.0 系列文章。

本篇介绍图像变换的内容。

图像变换类的继承层次为：
System.Object
  System.Windows.DependencyObject
    System.Windows.Media.GeneralTransform
      System.Windows.Media.Transform
        System.Windows.Media.MatrixTransform
        System.Windows.Media.RotateTransform
        System.Windows.Media.ScaleTransform
        System.Windows.Media.SkewTransform
        System.Windows.Media.TransformGroup
        System.Windows.Media.TranslateTransform
       

旋转变换(RotateTransform)

围绕点 CenterX 和 CenterY 将对象旋转指定的 Angle。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Image x:Name="img1" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
    </Image>
    <Image x:Name="img" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
        <Image.RenderTransform>
            <RotateTransform Angle="30" CenterX="20" CenterY="20"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

C#:

RotateTransform rotate = new RotateTransform();
rotate.Angle = 30;
rotate.CenterX = 20;
rotate.CenterY = 20;

img.RenderTransform = rotate;

缩放变换(ScaleTransform)

二维坐标系内缩放对象。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Image x:Name="img1" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150"> C#:
    </Image>
    <Image x:Name="img" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
        <Image.RenderTransform>
            <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

扭曲变换(SkewTransform)

XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Image x:Name="img1" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
    </Image>
    <Image x:Name="img" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
        <Image.RenderTransform>
            <SkewTransform CenterX="0" CenterY="0" AngleX="10" AngleY="10" ></SkewTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

平移变换(TranslateTransform)

二维坐标系中平移对象。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Image x:Name="img1" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
    </Image>
    <Image x:Name="img" Canvas.Left="100" Canvas.Top="40" Source="flower.jpg" Width="220" Height="150">
        <Image.RenderTransform>
            <TranslateTransform X="10" Y="10"></TranslateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

变换组(TransformGroup)

由以上几种变换组成的复合变换。

矩阵变换(MatrixTransform)

矩阵变换是最复杂的，最灵活，最底层的变换。矩阵结构如下：


点(X,Y)经上面的矩阵变换后结果为(X1,Y1)
X1 = X*M11 + Y*M21+ OffsetX
Y1 = X*M12 + Y*M22+ OffsetY

矩阵变换可以实现上面介绍的所有的变换。
矩阵变换在线示例：

结束语

本片介绍了图像变换，图像变换能实现很多酷炫的效果，特别是在动画处理的时候。
下一篇介绍画笔(Brush)。