WPF的图片操作效果（一）：RenderTransform

一.RenderTransform类的成员：

1.TranslateTransform 　　平移效果

2.RotateTransform 　　　 旋转效果

3.ScaleTransform 　　      缩放效果

4.SkewTransform 　　     扭转效果

5.TransformGroup　　　　组合效果

6.MatrixTransform　　　　是其他几个变形类的基类，矩阵方式实现效果

 

二.简单效果介绍

1.TranslateTransform 　　平移效果

   <Image Source="logo.png" Width="100" Height="100">
                <Image.RenderTransform>
                    <TranslateTransform X="20" Y="20"/>
                </Image.RenderTransform>
            </Image>

注释：X和Y分别代表图片在X方向和Y方向的偏移量

 

2.RotateTransform 　　　 旋转效果

<Image Source="logo.png" Width="100" Height="100">
                <Image.RenderTransform>
                    <RotateTransform Angle="70" CenterX="50" CenterY="100" />
                </Image.RenderTransform>
            </Image>

注释：Angle是偏转角度，CenterX和CenterY是中心点，（0，0）是原点，非零值代表经过偏移之后的中心点

 

3.ScaleTransform 　　      缩放效果

<Image Source="logo.png" Width="100" Height="100">
                <Image.RenderTransform>
                    <ScaleTransform CenterX="10" CenterY="20" ScaleX="0.5" ScaleY="0.5"/>
                </Image.RenderTransform>
            </Image>

注释：Center代表原点坐标偏移量，ScaleX和ScaleY分别代表X和Y方向的缩放比例

 

4.SkewTransform 　　     扭转效果

<Image Source="logo.png" Width="100" Height="100">
                <Image.RenderTransform>
                    <SkewTransform AngleX="30" AngleY="20" CenterX="0" CenterY="0"/>
                </Image.RenderTransform>
            </Image>

 

注释：AngleX和AngleY的方向扭转 CenterX和CenterY是偏移中心点的偏移量

 

5.TransformGroup　　　　组合效果

<Image Source="logo.png" Width="100" Height="100">
                <Image.RenderTransform>
                    <TransformGroup >
                        <ScaleTransform CenterX="10" CenterY="20" ScaleX="0.5" ScaleY="0.5"/>
                        <RotateTransform Angle="70" CenterX="50" CenterY="50" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>

 

注释：就是上述简单效果的叠加使用

 

6.MatrixTransform　　　　是其他几个变形类的基类，矩阵方式实现效果

<Image Source="logo.png" Width="100" Height="100">
                <Image.RenderTransform>
                    <MatrixTransform Matrix="1 0 0 1 80 40"/>
                </Image.RenderTransform>
            </Image>

 

 注释：该矩阵效果是通过矩阵计算得出其实际效果，但我不懂，按自己的理解分析出如下：

　　Matrix的6个参数是通过矩阵计算得出Image的新坐标和效果，第一个和第四个分别控制该图片的X和Y方向的缩放比例，第二个参数和第三个参数分别控制X和Y方向扭转，最后两个参数代表X和Y方向的平移量

 

三.示例下载