wpf 实现用户在界面画旋转矩形 工程实现
时间: 2024-02-24 17:58:52 浏览: 20
要实现在界面上画旋转矩形,可以使用 WPF 的 `Canvas` 控件和 `RotateTransform` 类型。
首先,在 XAML 中创建一个 `Canvas` 控件,用于显示画布,以及一个按钮控件,用于触发画矩形的操作。
```xml
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<Button Click="DrawRectangle" Content="Draw Rectangle"/>
<Canvas x:Name="canvas" Background="White" Width="500" Height="300"/>
</StackPanel>
</Window>
```
在代码中,定义一个 `bool` 类型的变量 `isDrawing`,用于标识当前是否正在画矩形。
```csharp
bool isDrawing = false;
```
在按钮的点击事件 `DrawRectangle` 中,设置 `isDrawing` 为 `true`,并在 `MouseMove` 事件中根据鼠标移动的位置动态调整矩形的大小和位置。
```csharp
private void DrawRectangle(object sender, RoutedEventArgs e)
{
isDrawing = true;
canvas.MouseMove += OnMouseMove;
}
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (!isDrawing) return;
Point startPoint = e.GetPosition(canvas);
// 计算矩形的宽度和高度
double width = Math.Abs(startPoint.X - endPoint.X);
double height = Math.Abs(startPoint.Y - endPoint.Y);
// 计算旋转角度
double angle = Math.Atan2(endPoint.Y - startPoint.Y, endPoint.X - startPoint.X) * 180 / Math.PI;
// 设置矩形的位置和大小
Canvas.SetLeft(rectangle, Math.Min(startPoint.X, endPoint.X));
Canvas.SetTop(rectangle, Math.Min(startPoint.Y, endPoint.Y));
rectangle.Width = width;
rectangle.Height = height;
// 设置矩形的旋转角度
rectangle.RenderTransformOrigin = new Point(0.5, 0.5);
rectangle.RenderTransform = new RotateTransform(angle);
}
private void OnMouseUp(object sender, MouseButtonEventArgs e)
{
isDrawing = false;
canvas.MouseMove -= OnMouseMove;
}
```
在 `MouseMove` 事件中,首先获取鼠标当前的位置 `startPoint`,然后根据鼠标移动的位置计算出矩形的宽度和高度。接着,使用 `Math.Atan2` 方法计算出矩形的旋转角度 `angle`,并使用 `Canvas.SetLeft`、`Canvas.SetTop`、`Width` 和 `Height` 属性设置矩形的位置和大小。最后,使用 `RotateTransform` 对象设置矩形的旋转角度。
在代码中,还需要定义一个 `Rectangle` 控件,并在 `OnMouseMove` 方法中动态设置其位置、大小和旋转角度。
```csharp
Rectangle rectangle = new Rectangle
{
Stroke = Brushes.Black,
StrokeThickness = 2
};
canvas.Children.Add(rectangle);
```
最后,在 `OnMouseUp` 事件中,将 `isDrawing` 设置为 `false`,并取消 `MouseMove` 事件的订阅,以结束画矩形的操作。
完整的代码如下:
```xml
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<Button Click="DrawRectangle" Content="Draw Rectangle"/>
<Canvas x:Name="canvas" Background="White" Width="500" Height="300"/>
</StackPanel>
</Window>
```
```csharp
bool isDrawing = false;
Point endPoint;
Rectangle rectangle = new Rectangle
{
Stroke = Brushes.Black,
StrokeThickness = 2
};
public MainWindow()
{
InitializeComponent();
canvas.Children.Add(rectangle);
canvas.MouseUp += OnMouseUp;
}
private void DrawRectangle(object sender, RoutedEventArgs e)
{
isDrawing = true;
canvas.MouseMove += OnMouseMove;
}
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (!isDrawing) return;
Point startPoint = e.GetPosition(canvas);
// 计算矩形的宽度和高度
double width = Math.Abs(startPoint.X - endPoint.X);
double height = Math.Abs(startPoint.Y - endPoint.Y);
// 计算旋转角度
double angle = Math.Atan2(endPoint.Y - startPoint.Y, endPoint.X - startPoint.X) * 180 / Math.PI;
// 设置矩形的位置和大小
Canvas.SetLeft(rectangle, Math.Min(startPoint.X, endPoint.X));
Canvas.SetTop(rectangle, Math.Min(startPoint.Y, endPoint.Y));
rectangle.Width = width;
rectangle.Height = height;
// 设置矩形的旋转角度
rectangle.RenderTransformOrigin = new Point(0.5, 0.5);
rectangle.RenderTransform = new RotateTransform(angle);
}
private void OnMouseUp(object sender, MouseButtonEventArgs e)
{
isDrawing = false;
canvas.MouseMove -= OnMouseMove;
}
```