一.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方向的平移量
三.示例下载