12.旋转、缩放、倾斜、平移Transform
RotateTransform旋转
RotateTransform表示旋转一个对象的角度。首先我们来看一下它的定义
public sealed class RotateTransform : Transform { public static readonly DependencyProperty AngleProperty; public static readonly DependencyProperty CenterXProperty; public static readonly DependencyProperty CenterYProperty; public RotateTransform(); public RotateTransform(double angle); public RotateTransform(double angle, double centerX, double centerY); public double Angle { get; set; } public double CenterX { get; set; } public double CenterY { get; set; } public override Matrix Value { get; } public RotateTransform Clone(); public RotateTransform CloneCurrentValue(); protected override Freezable CreateInstanceCore(); }
Angle属性表示获取或设置顺时针旋转的角度（以度为单位）。默认值是0度。
CenterX 和CenterY 表示获取或设置旋转中心点的 x y坐标，Value属性表示当前转换的矩阵。
通常我们只需要设置Angle、CenterX 和CenterY即可
案列：
<Button Grid.Column="1" Width="100" Height="25" Content="RotateTransform" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button.RenderTransform> <RotateTransform Angle="{Binding ElementName=slider,Path=Value}" CenterX="50" CenterY="12.5"/> </Button.RenderTransform> </Button> <Slider x:Name="slider" Grid.ColumnSpan="3" Margin="30" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="0" Maximum="720" Width="400" />
ScaleTransform缩放
ScaleTransform表示在二维xy坐标系内缩放对象。所以它放大缩小的方向只有两个，分别是X方向和Y方向。另外，每个方向上需要设置一个中心点。
public sealed class ScaleTransform : Transform { public static readonly DependencyProperty ScaleXProperty; public static readonly DependencyProperty ScaleYProperty; public static readonly DependencyProperty CenterXProperty; public static readonly DependencyProperty CenterYProperty; public ScaleTransform(); public ScaleTransform(double scaleX, double scaleY); public ScaleTransform(double scaleX, double scaleY, double centerX, double centerY); public double ScaleX { get; set; } public double ScaleY { get; set; } public double CenterX { get; set; } public double CenterY { get; set; } public override Matrix Value { get; } public ScaleTransform Clone(); public ScaleTransform CloneCurrentValue(); protected override Freezable CreateInstanceCore(); }
ScaleX属性：获取或设置X轴缩放比例。
ScaleY属性：获取或设置Y轴缩放比例。
CenterX属性：获取或设置当前缩放对象的X轴的中心坐标。
CenterY属性：获取或设置当前缩放对象的Y轴的中心坐标。
案例：
<Button Grid.Column="0" Width="100" Height="25" Content="ScaleTransform" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button.RenderTransform> <ScaleTransform ScaleX="{Binding ElementName=sliderX,Path=Value}" ScaleY="{Binding ElementName=sliderY,Path=Value}"/> </Button.RenderTransform> </Button> <Button x:Name="button" Grid.Column="1" Width="100" Height="25" Content="ScaleTransform" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button.RenderTransform> <ScaleTransform CenterX="50" CenterY="12.5"/> </Button.RenderTransform> </Button> <Slider x:Name="sliderX" Grid.ColumnSpan="3" Margin="40 25 20 15" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="1" Maximum="10" Width="400" /> <Slider x:Name="sliderY" Orientation="Vertical" Grid.ColumnSpan="3" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="1" Maximum="10" Height="300" />
SkewTransform倾斜
SkewTransform表示倾斜某个对象，它有两个方向的倾斜角度可以设置，AngleX表示设置x 轴倾斜角度，该角度是从 y 轴逆时针旋转后测量得到，单位为度。AngleY表示设置y 轴倾斜角度，该角度通过测量从 x 轴逆时针旋转得到的角度度数。另外，它也有CenterX和CenterY，表示倾斜转换中心的xy坐标。
public sealed class SkewTransform : Transform { public static readonly DependencyProperty AngleXProperty; public static readonly DependencyProperty AngleYProperty; public static readonly DependencyProperty CenterXProperty; public static readonly DependencyProperty CenterYProperty; public SkewTransform(); public SkewTransform(double angleX, double angleY); public SkewTransform(double angleX, double angleY, double centerX, double centerY); public double AngleX { get; set; } public double AngleY { get; set; } public double CenterX { get; set; } public double CenterY { get; set; } public override Matrix Value { get; } public SkewTransform Clone(); public SkewTransform CloneCurrentValue(); }
案例：
<Border Grid.Column="0" Width="120" Height="120" Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center"> <Border.RenderTransform> <SkewTransform CenterX="0" CenterY="0" AngleX="{Binding ElementName=sliderX,Path=Value}" AngleY="{Binding ElementName=sliderY,Path=Value}"/> </Border.RenderTransform> </Border> <Button x:Name="button" Grid.Column="1" Background="LightBlue" Width="120" Height="120" Content="SkewTransform倾斜" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button.RenderTransform> <SkewTransform CenterX="60" CenterY="60" AngleX="{Binding ElementName=sliderX,Path=Value}" AngleY="{Binding ElementName=sliderY,Path=Value}"/> </Button.RenderTransform> </Button> <Slider x:Name="sliderX" Grid.ColumnSpan="3" Margin="40 25 20 15" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="0" Maximum="180" Width="400" /> <Slider x:Name="sliderY" Orientation="Vertical" Grid.ColumnSpan="3" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="0" Maximum="180" Height="300" />
TranslateTransform平移
TranslateTransform只有X和Y两个属性，分别代表X轴和Y轴上的平移距离。
public sealed class TranslateTransform : Transform { public static readonly DependencyProperty XProperty; public static readonly DependencyProperty YProperty; public TranslateTransform(); public TranslateTransform(double offsetX, double offsetY); public double X { get; set; } public double Y { get; set; } public override Matrix Value { get; } public TranslateTransform Clone(); public TranslateTransform CloneCurrentValue(); }
案例：
<Border Grid.Column="0" Width="120" Height="120" Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center"> <Border.RenderTransform> <TranslateTransform X="{Binding ElementName=sliderX,Path=Value}" Y="{Binding ElementName=sliderY,Path=Value}"/> </Border.RenderTransform> </Border> <Border x:Name="border" Grid.Column="1" Background="LightGreen" Width="120" Height="120" HorizontalAlignment="Center" VerticalAlignment="Center"> <Border.RenderTransform> <TranslateTransform/> </Border.RenderTransform> </Border> <Slider x:Name="sliderX" Grid.ColumnSpan="3" Margin="40 25 20 15" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="0" Maximum="180" Width="400" /> <Slider x:Name="sliderY" Orientation="Vertical" Grid.ColumnSpan="3" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Value="0" Maximum="180" Height="300" />
在这个例子中，左边的border的TranslateTransform 对象的值直接绑定到slider，拖动两个slider就可以控制border水平和垂直方向的位置。右边的border则利用鼠标按下、移动和抬起事件，初步实现了用鼠标去移动位置的功能
public partial class MainWindow : Window { public Point DownPoint { get; private set; } = new Point(0, 0); public bool IsMouseDown { get; private set; } = false; public MainWindow() { InitializeComponent(); } private void Window_MouseMove(object sender, MouseEventArgs e) { if (!IsMouseDown) return; if (border.RenderTransform is TranslateTransform t) { Point point = e.GetPosition(this); t.X = (point.X - DownPoint.X); t.Y = (point.Y - DownPoint.Y); } } private void Window_MouseDown(object sender, MouseButtonEventArgs e) { IsMouseDown = true; DownPoint = e.GetPosition(this); } private void Window_MouseUp(object sender, MouseButtonEventArgs e) { IsMouseDown = false; } }
