12.旋转、缩放、倾斜、平移Transform

  • 12.旋转、缩放、倾斜、平移Transform已关闭评论
  • 57 次浏览
  • A+
所属分类:.NET技术
摘要

RotateTransform旋转 RotateTransform表示旋转一个对象的角度。首先我们来看一下它的定义

RotateTransform旋转

RotateTransform表示旋转一个对象的角度。首先我们来看一下它的定义

12.旋转、缩放、倾斜、平移Transform

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方向。另外,每个方向上需要设置一个中心点。

12.旋转、缩放、倾斜、平移Transform

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