通过 MouseDown 创建一个圆圈并移动它

Question

我用 C# 用 wpf 编写了一个小应用程序。我的目标是在图片中画一个圆圈。只要按下鼠标按钮，圆就应该是可移动的，只有在用户释放鼠标按钮后，圆才最终被绘制出来。为了绘制椭圆，我使用 DrawEllipse。

                    grf.DrawEllipse(
                    myPen,                                      
                    (float)xOriginal - 25,     
                    (float)yOriginal - 25,     
                    radius,                            
                    radius                      
                    );

释放鼠标后，应该会画出圆圈。那我就想取坐标保存一下。

我的想法是使用 MouseDown、MouseMove 和 MouseUp。 MouseDown 注册点击。使用 MouseMove，每次都要重新绘制圆圈，使用 MouseUp，最后应该绘制圆圈。

我的问题是，使用 MouseMove 时，圆圈会一次又一次地绘制，而不会被删除。此外，它的延迟令人难以置信。有没有更好的解决方案

这是我快速而肮脏的代码 sn-p：

        bool registerClick = false;

    private void Image_imageBox_MouseregisterClick(object sender, MouseButtonEventArgs e)
    {
        registerClick = true;
    }

    private void Image_imageBox_MouseMove(object sender, MouseEventArgs e)
    {
        if (registerClick)
        {
            Pen myPen = new Pen(Color.FromArgb(255, 0, 0, 0), 10);
            int radius = 50;
            Bitmap b1 = _detektion.BildOriginal.Bitmap;

            using (Graphics grf = Graphics.FromImage(b1))
            {
                // zeichne denkreis ein
                grf.DrawEllipse(
                    myPen,                                      
                    ((float)e.GetPosition(imageBox_Image).X - 25,     
                    (float)e.GetPosition(imageBox_Image).X - 25,     
                    radius,                         
                    radius                      
                    );
            }

            imageBox_Image.Source = DGX_Body.Utility.Images.ConvertBitmapToBitmapImage(b1);
        }
    }

    private void Image_imageBox_MouseUp(object sender, MouseButtonEventArgs e)
    {
        Console.WriteLine("Up!");
        registerClick = false;
    }

请你帮帮我。 谢谢

Answer 1

这是一个非常基本的画布中带有鼠标输入的椭圆示例。

XAML：

<Grid>
    <Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
           Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Canvas Background="Transparent"
            MouseLeftButtonDown="CanvasMouseLeftButtonDown"
            MouseLeftButtonUp="CanvasMouseLeftButtonUp"
            MouseMove="CanvasMouseMove"/>
</Grid>

带有事件处理程序的代码：

private Ellipse currentEllipse;

private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;
    var pos = e.GetPosition(canvas);
    canvas.CaptureMouse();

    currentEllipse = new Ellipse
    {
        Width = 50,
        Height = 50,
        Margin = new Thickness(-25, -25, 0, 0),
        Stroke = Brushes.White,
        StrokeThickness = 3
    };

    Canvas.SetLeft(currentEllipse, pos.X);
    Canvas.SetTop(currentEllipse, pos.Y);
    canvas.Children.Add(currentEllipse);
}

private void CanvasMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;
    canvas.ReleaseMouseCapture();
    currentEllipse = null;
}

private void CanvasMouseMove(object sender, MouseEventArgs e)
{
    if (currentEllipse != null)
    {
        var canvas = (Canvas)sender;
        var pos = e.GetPosition(canvas);

        Canvas.SetLeft(currentEllipse, pos.X);
        Canvas.SetTop(currentEllipse, pos.Y);
    }
}

---

通过这个小改动，您还可以选择现有的省略号：

private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;
    var pos = e.GetPosition(canvas);
    canvas.CaptureMouse();

    currentEllipse = e.OriginalSource as Ellipse;

    if (currentEllipse == null)
    {
        currentEllipse = new Ellipse
        {
            Width = 50,
            Height = 50,
            Margin = new Thickness(-25, -25, 0, 0),
            Fill = Brushes.Transparent,
            Stroke = Brushes.White,
            StrokeThickness = 3
        };

        canvas.Children.Add(currentEllipse);
    }

    Canvas.SetLeft(currentEllipse, pos.X);
    Canvas.SetTop(currentEllipse, pos.Y);
}