Create a Circle by MouseDown and moved it around

Question

i write a little application in C# with wpf. My goal is to draw a circle in a picture. As long as the mouse button is pressed, the circle should be movable and only after the user has released the mouse button the circle should be finally drawn. For drawing the ellipse i use DrawEllipse.

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

After the mouse is released, the circle should be drawn. Then I would like to pick up the coordinates and save.

My idea is to use MouseDown, MouseMove and MouseUp. MouseDown registers the click. With MouseMove, the circles should be redrawn each time and with MouseUp, the circle should be finally drawn.

My problem is that with MouseMove the circle is drawn again and again and not deleted. In addition, it is incredibly delayed. Is there a better solution

Here is my quick and dirty code snippet:

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

Can you help me please. Thank you

Answer 1

Here is a very basic example of Ellipses in a Canvas with mouse input.

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>

Code behind with event handlers:

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

---

With this small change you may also pick existing Ellipses:

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