如何使用鼠標在 canvas 上繪制矩形，但在移動鼠標時看到矩形

Question

我是 WPF 的新手，通過遷移現有的 winforms 應用程序來學習。

我正在 Canvas 上繪制矩形，其中包含一個圖像。 矩形從 Image 上導入的 IntPtr object 中獲取 X、Y 和 Z 信息，然后將其作為數據進行分析。

使用 Children.Add() 繪制矩形很容易，並且數據捕獲工作正常，但我只能看到繪制后的矩形，所以很難知道你要去哪個區域 select。 我想在繪圖期間在鼠標移動時看到它（如標准套索矩形）。 在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 中的圖像是否有問題，或者我是否需要在這里引用矩形之類的東西？

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

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