ToB企服应用市场:ToB评测及商务社交产业平台

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4