如何在画布上拖放用户创建的矩形

Question

WPF和C#非常新，我正在尝试构建一个非常原始的图像编辑器。用户当前可以用鼠标左键创建任何大小的矩形，并用鼠标右键删除任何矩形。我正试图通过允许拖放矩形来添加更多功能，但我似乎找不到一个好的解决方案。我看到的大多数答案都是处理画布中的硬编码自定义矩形，而我的案例处理的是用户生成的矩形。

<Window x:Class="WpfAppCaseGuard.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfAppCaseGuard"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">

<Canvas x:Name="canvas" MouseLeftButtonDown="Canvas_LeftMouseButtonDown" MouseRightButtonDown="Canvas_RightMouseButtonDown" MouseMove="Canvas_MouseMove" MouseUp="Canvas_MouseUp"  Background="Transparent">

<Button x:Name="btnOpen" Content="Select Image" HorizontalAlignment="Left" Margin="367,148,0,0" VerticalAlignment="Top" Click="Button_Click"/>
<Image x:Name="imagePicture"/>
</Canvas>


</Window>

using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfAppCaseGuard
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog openFileDialog = new OpenFileDialog();
if (openFileDialog.ShowDialog() == true)
{
Uri fileUri = new Uri(openFileDialog.FileName);
imagePicture.Source = new BitmapImage(fileUri);
}
}
private Point startPoint;
private Rectangle rect;
private void Canvas_LeftMouseButtonDown(object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(canvas);
rect = new Rectangle
{
Stroke = Brushes.Red,
StrokeThickness = 2,
Fill = Brushes.AliceBlue
};
Canvas.SetLeft(rect,startPoint.X);
Canvas.SetTop(rect,startPoint.Y);
canvas.Children.Add(rect);


}
private void Canvas_RightMouseButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.OriginalSource is Rectangle)
{
Rectangle activeRect = (Rectangle)e.OriginalSource;
canvas.Children.Remove(activeRect);
}
}
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Released || rect == null)
return;
var pos = e.GetPosition (canvas);
var x = Math.Min(pos.X, startPoint.X);
var y = Math.Min(pos.Y, startPoint.Y);
var w = Math.Max(pos.X, startPoint.X) - x;
var h = Math.Max(pos.Y, startPoint.Y) - y;
rect.Width = w;
rect.Height = h;
Canvas.SetLeft (rect,x);
Canvas.SetTop (rect,y);
}
private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
rect = null;
}


}
}

Answer 1

这可能会对您有所帮助：

public void MakeDraggable(FrameworkElement dragObject, Canvas canvas)
{
bool isDragging = false;
double clickPosition_X = 0;
double clickPosition_Y = 0;
dragObject.MouseLeftButtonDown += new MouseButtonEventHandler(Control_MouseLeftButtonDown);
dragObject.MouseLeftButtonUp += new MouseButtonEventHandler(Control_MouseLeftButtonUp);
dragObject.MouseMove += new MouseEventHandler(Control_MouseMove);
void Control_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
isDragging = true;
var p = e.GetPosition(dragObject);
clickPosition_X = p.X;
clickPosition_Y = p.Y;
dragObject.CaptureMouse();
}
void Control_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
isDragging = false;
dragObject.ReleaseMouseCapture();
}
void Control_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
Point currentPosition = e.GetPosition(dragObject.Parent as Canvas);
dragObject.Margin = new Thickness(currentPosition.X - clickPosition_X, currentPosition.Y - clickPosition_Y, 0, 0);
}
}
}

这样使用：

MakeDraggable(rectangle, canvas);