WPF快速指导14：变换

WPF快速指导14：变换

变换，也叫变形（transform）。它定义了从一个坐标空间到另一个坐标空间的映射。变换通过矩阵来描述。变换包括旋转、伸缩、倾斜、调动，这些行为都是矩阵变换。用户还可以实现自己的矩阵。
各种变换通过RenderTransform属性来应用。RenderTransform是UIElement的一个公共属性，它的类型是Transform。类型Transform是一个抽象类。所以，要为元素的设置变化，就意味着要为元素的RenderTransform属性设置一个Transform的子类的一个实例对象。这话听上去有些拗口，但是下面的示例可以让大家明确这一点。

1：变换之RotateTransform

RotateTransform 就是抽象类Transform的一个子类，它负责在二维 x-y 坐标系内围绕指定点顺时针旋转对象。如，对一个rectangle转换角度45‘，前台代码如下：

        <Rectangle x:Name="Rect1" Width="200" Height="100" Stroke="Black" StrokeThickness="5" RadiusX="50" RadiusY="5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>

如果要使用后台代码，则如下：

前：  

        <Rectangle x:Name="Rect2" Width="200" Height="100" Stroke="Black">
        </Rectangle>

后台：

            Rect2.RenderTransform = new RotateTransform() { Angle = 30 }; 

默认的旋转点是矩形的左上角。为了更改旋转点，可以设置CenterX和CenterY。两个矩形的最终样式如下：

2：变换之ScaleTransform
ScaleTransform也是抽象类Transform的一个子类，它负责在二维 x-y 坐标系内缩放对象。
如，要对一个TextBlock宽度增大1.5，高度缩小0.5，应该像下面这样编码：
前台：

        <TextBlock x:Name="textBlock1" Background="Blue" Width="100" Height="50">abc</TextBlock>

后台：

            textBlock1.RenderTransform = new ScaleTransform() { ScaleX = 1.5, ScaleY = 0.5 };

3：变化之TranslateTransform
TranslateTransform也是抽象类Transform的一个子类，它负责在二维 x-y 坐标系内平移（移动）对象。
前台：

        <TextBlock x:Name="textBlock1" Background="Blue" Width="100" Height="50">abc</TextBlock>
        <Button x:Name="buttonTest" Click="buttonTest_Click" Canvas.Top="250">测试</Button>

后台：

        private void buttonTest_Click(object sender, RoutedEventArgs e)
        {
            textBlock1.RenderTransform = new TranslateTransform() { X = 50, Y = 100 };
        }

点击后，物体平移。

4：变化之SkewTransform
SkewTransform也是抽象类Transform的一个子类，它负责表示二维扭曲，可用于在二维对象中创建三维深度幻觉。
代码：

            textBlock1.RenderTransform = new SkewTransform() { AngleX = 30, AngleY = 20, CenterX = 50, CenterY = 80 };

5：变化之MatrixTransform
所有的变换，最根本的就是MatrixTransform。也就是以上几种变换，都可以通过MatrixTransform来解决。这需要一些图形的矩阵变换的知识，在这里不做深入讨论。

6：变换合并
如果尝试将以上的变换合并起来，即，假设你进行这样的操作：第一步将textBlock1设置为倾斜45°角，第二步将其平移50，则发现，倾斜角度没有了。如果要合并这样的操作，需要用到TransformGroup。
假设控件的初始状态如下：

            TransformGroup group = new TransformGroup();
            group.Children.Add(new SkewTransform() { AngleX = 30, AngleY = 20, CenterX = 50, CenterY = 80 });
            textBlock1.RenderTransform = group;

要移动的代码如下：

        private void buttonTest_Click(object sender, RoutedEventArgs e)
        {
            TransformGroup group = ((textBlock1.RenderTransform) as TransformGroup);
            group.Children.Add(new TranslateTransform() { X = 50, Y = 100 }); 
           textBlock1.RenderTransform = group;
        }