wpf-绘图-图形的变形

Transform包括尺寸、位置、坐标系比例、旋转角度等的变化。

WPF中的变形与UI是分开的。例如可以设计一个“向左旋转45度”的变形，然后把这个变形赋值给不同的UI的变形控制属性。这样做的目的是为了减少为UIElement类添加过多属性，且能提高变形类实例的复用性。

控制变形的属性有：（都是依赖属性，数据类型都是Transform抽象类）

• RenderTransform：定义在UIElement类中，呈现变形
• LayoutTransform：定义在FrameworkElement类中，布局变形

抽象类Transform的派生类有：

• MatrixTransform：把容纳被变形UI元素的矩形顶点看作一个矩阵进行变形
• RotateTransform：以给定的点为旋转中心
• ScaleTransform：调整坐标系，可产生缩放效果
• SkewTransform：拉伸变形，在横向和纵向拉伸
• TranslateTransform：偏移变形，使被变形元素在横向或纵向偏移给定值
• TransformGroup：变形组，可以把多个独立变形放在一起，产生复合变形效果

用户不能察觉是控件本身位置角度变了，还是呈现的位置与角度变了。但是在窗口上移动UI元素本身会导致窗体布局改变，而窗体布局的每一个变化都会导致所有窗体元素的尺寸测算函数、位置测算函数、呈现函数等被调用，造成系统资源占用激增，程序性能下降。使用呈现变形则不牵扯布局改变，只涉及窗体重绘。这样能提升效率。制作动画需要使用RenderTransform。

RenderTransform

举例：RenderTransform

效果是看到如图所示。没有动作/变化，就是transform完成的图形。

控件的内容

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Width="80" HorizontalAlignment="Left" VerticalAlignment="Top"
                Height="80" Content="Hello">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform CenterX="40" CenterY="40" Angle="45"/>
                    <TranslateTransform X="100" Y="100"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>

LayoutTransform

布局变形会影响窗体布局，导致窗体布局重新测算。因此，布局变形一半只用于静态变形上，不用于制作动画。

举例：LayoutTransform

如果使用RenderTransform，会扩张到很宽，但是LayoutTransform则会更贴Content的高矮？

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="titleBar" Background="LightBlue">
            <TextBlock Text="Hello Transformer!" FontSize="24"
                       HorizontalAlignment="Left" VerticalAlignment="Bottom">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>
    </Grid>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="titleBar" Background="LightBlue">
            <TextBlock Text="Hello Transformer!" FontSize="24"
                       HorizontalAlignment="Left" VerticalAlignment="Bottom">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
        </Grid>
    </Grid>