12.旋轉、縮放、傾斜、平移Transform

RotateTransform旋轉 RotateTransform表示旋轉一個對象的角度。首先我們來看一下它的定義 public sealed class RotateTransform : Transform { public static readonly DependencyProperty ...

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