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;
    }
}