WPF图形的变形

四、WPF图形的变形

       RenderTransform：呈现变形，

1. TranslateTransform：偏移变形，能够使某对象的位置发生平移变化。
2. RotateTransform：旋转变化，以给定的点为旋转中心，以角度为单位进行旋转变形。
3. ScaleTransform：缩放变化，调整被变形的对象的坐标系，有缩放效果。
4. SkewTransform：扭曲变化，可以横向和纵向对元素进行扭曲。

看下面一个例子：

   <Grid Height="969" VerticalAlignment="Bottom">

        <Grid.RowDefinitions>

            <RowDefinition Height="160*"/>

            <RowDefinition Height="163*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="601*"/>

            <ColumnDefinition Width="592*"/>

        </Grid.ColumnDefinitions>

        <!--平移变化：以原来的对象为坐标原点，然后向X轴，Y轴进行平移-->

        <Canvas Grid.Row="0" Grid.Column="0">

            <Image Width="280" Canvas.Top="50" Canvas.Left="50" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="50" Canvas.Left="50" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <TranslateTransform X="120" Y="120"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

        <!--旋转变化：Angle(旋转角度)，CenterX、CenterY(旋转体的中心)-->

        <Canvas Grid.Row="0" Grid.Column="1">

            <Image Width="280" Canvas.Top="50" Canvas.Left="200" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="50" Canvas.Left="200" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <RotateTransform Angle="45" CenterX="0" CenterY="0"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

        <!--缩放变化：CenterX、CenterY(指定的点)，ScaleX、ScaleY(X轴、Y轴缩放的倍数)-->

        <Canvas Grid.Row="1" Grid.Column="0">

            <Image Width="280" Canvas.Top="50" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="50" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

        <!--扭曲变化：CenterX、CenterY(指定的点)，AngleX、AngleY是让元素围绕X轴Y轴倾斜的角度-->

        <Canvas Grid.Row="1" Grid.Column="1">

            <Image Width="280" Canvas.Top="30" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.5"></Image>

            <Image Width="280" Canvas.Top="30" Canvas.Left="100" Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg">

                <Image.RenderTransform>

                    <SkewTransform CenterX="0" CenterY="0"  AngleX="30" AngleY="30"/>

                </Image.RenderTransform>

            </Image>

        </Canvas>

</Grid>

效果图如下：

5）TransformGroup：实现多种效果的叠加，就要使用到TransformGroup，否则会报错，TransformGroup的作用类似于在控件不居中的StackPanel内嵌的作用，把多种元素组合成一种变化的容器

看下面一个例子：

<Grid>

        <Button Width="80" Height="80" Content="smile" FontSize="25" HorizontalAlignment="Left" VerticalAlignment="Top" >

            <Button.RenderTransform>

                <TransformGroup>

                    <RotateTransform Angle="45" CenterX="0" CenterY="0"/>

                    <TranslateTransform X="200" Y="200"/>

                </TransformGroup>

            </Button.RenderTransform>

        </Button>

</Grid>

效果图如下：

6）MatrixTransform：通过一种矩形算法来进行运算得到相应的效果的。