如何用鼠标在画布上绘制矩形，但在移动鼠标时看到矩形答案

【问题标题】：how to draw a rectangle on a canvas with mouse, but see the rectangle while moving the mouse如何用鼠标在画布上绘制矩形，但在移动鼠标时看到矩形
【发布时间】：2020-06-11 01:42:49
【问题描述】：

我是 WPF 新手，通过迁移现有的 winforms 应用来学习。

我正在画布上绘制矩形，其中包含一个图像。矩形从 Image 上导入的 IntPtr 对象获取 X、Y 和 Z 信息，然后将其作为数据进行分析。

使用 Children.Add() 绘制矩形很容易，并且数据捕获工作正常，但我只能看到绘制后的矩形，因此很难知道您要选择哪个区域。我想在绘图期间在鼠标移动时看到它（如标准套索矩形）。在winforms中我使用了Paint事件，如何在WPF中做类似的事情？我正在使用 MouseDown 和 MouseUp 事件来捕获矩形的起点和终点

        public void MouseDown(MouseButtonEventArgs e, Canvas evImage)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
                startPos = e.GetPosition(evImage);
            evImage.CaptureMouse();
        }

        public void MouseUp(MouseButtonEventArgs e, Canvas evImage)
        {
            if (Constants.count < 3)
            {
                if (e.LeftButton == MouseButtonState.Released)
                    currentPos = e.GetPosition(evImage);

                rec = new System.Windows.Shapes.Rectangle()
                {
                    Stroke = System.Windows.Media.Brushes.LightBlue,
                    StrokeThickness = 1,
                    Name = "rec" + Constants.count.ToString(),
                };

                if (startPos.X < currentPos.X)
                    rec.Width = currentPos.X - startPos.X;
                else
                    rec.Width = startPos.X - currentPos.X;
                if (startPos.Y < currentPos.Y)
                    rec.Height = currentPos.Y - startPos.Y;
                else
                    rec.Height = startPos.Y - currentPos.Y;

                if (rec.Height < 8)
                    rec.Height = 8;
                if (rec.Width < 8)
                    rec.Width = 8;

                if (evImage.Children.Count > Constants.count + 1)
                    evImage.Children.RemoveAt(Constants.count + 1);
                evImage.Children.Insert(Constants.count + 1, rec);
                Canvas.SetLeft(rec, startPos.X);
                Canvas.SetTop(rec, startPos.Y);
                evImage.ReleaseMouseCapture();

                SetRectangleData();
                Constants.count++;
            }
            else
            {
                Constants.count = 0;
                RecMove(e, evImage);
            }
        }

XAML - 这是我的主要学习点，我不知道在 Canvas 中使用 Image 是否有问题，或者我是否需要在此处引用矩形之类的东西？

<Canvas x:Name="evCanvas" MouseUp="evCanvas_MouseUp" MouseDown="evCanvas_MouseDown" Grid.Column="1" Height="550" Width="626" HorizontalAlignment="Left" Margin="10,43,0,0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" Grid.RowSpan="2">
    <Image x:Name="evImage" Height="550" Width="626" MouseMove="evImage_MouseMove" RenderTransformOrigin=".5,.5" />
</Canvas>

【问题讨论】：

在 MouseDown 上创建矩形并在 MouseMove 上更新它的大小。
哇，谢谢伙计，这很容易。感谢您的时间

标签： c# wpf canvas

【解决方案1】：

只需将 Left 和 Top 设置为最小 x 和 y，宽度设置为 max-x，高度设置为 max-y。

<Canvas x:Name="canvas" MouseDown="Canvas_MouseDown" MouseMove="Canvas_MouseMove" MouseUp="Canvas_MouseUp" Background="Transparent" />

然后执行以下操作：

private Point startPoint;
private Rectangle rect;

private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
    startPoint = e.GetPosition(canvas);

    rect = new Rectangle
    {
        Stroke = Brushes.LightBlue,
        StrokeThickness = 2
    };
    Canvas.SetLeft(rect,startPoint.X);
    Canvas.SetTop(rect,startPoint.Y);
    canvas.Children.Add(rect);
}

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

【讨论】：