四、WPF图形的变形
RenderTransform:呈现变形,
- TranslateTransform:偏移变形,能够使某对象的位置发生平移变化。
- RotateTransform:旋转变化,以给定的点为旋转中心,以角度为单位进行旋转变形。
- ScaleTransform:缩放变化,调整被变形的对象的坐标系,有缩放效果。
- 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:通过一种矩形算法来进行运算得到相应的效果的。