Dragging graphics objects on top of bitmaps

Question

I am attempting to drag a shape around a picturebox on the mousemove event but am struggling to get it to move smoothly. The picture box has an image loaded as the background and I would like the graphics object to drag a circle on top of the image when the mouse is clicked and dragged.

I have it working by creating a clone of the original image each time the mouse moves and reloading the picture box but it seems like their must be a better way to achieve this.

Without reloading the original bitmap each time any graphics added remain on the image creating a trail which is more like a paint application.

How do I clear previous drawings without reloading the entire image each time? Any help appreciated.

private void picCanvas_MouseMove(object sender, MouseEventArgs e)
{
    if (_drag)
    {
        picCanvas.Image = (Bitmap)_original.Clone();
        Graphics g = Graphics.FromImage((Bitmap)picCanvas.Image);
        g.DrawEllipse(_whitePen, e.X, e.Y, 10, 10);
        picCanvas.Invalidate();
    }
}

private void picCanvas_MouseDown(object sender, MouseEventArgs e)
{
    _drag = true;
}

private void picCanvas_MouseUp(object sender, MouseEventArgs e)
{
    _drag = false;
}

score 3 · Answer 1 · answered Oct 08 '12 at 19:14

check this sample it is simpler

//Load Image
Bitmap TestImage = new Bitmap(FileName);
//Create Graphics Object
Graphics g = Graphics.FromImage(TestImage);                   
g.DrawEllipse(new Pen(Color.Red), i, j,0.5F, 0.5F);
//View Your Results
pictureBox1.Image = TestImage;

honibis · Accepted Answer · 2011-02-02T11:21:30.380

0

To solve the problem in the best way, use picCanvas.Paint event. Set the positions at mousemove event and use that positions to draw at paint event.

    Point pos = Point.Empty;// or your initial position

    private void picCanvas_MouseMove(object sender, MouseEventArgs e)
    {
        if (_drag)
        {
            pos = e.Location;
        }
    }
    private void picCanvas_Paint(object sender, PaintEventArgs e)
    {
        if (_drag)
        {
            Graphics g = e.Graphics;//The event handler sends us the graphics object to use for painting
            g.DrawEllipse(_whitePen, pos.X, pos.Y, 10, 10); 
        }
    }

You should add the Paint event to the Control and set the image at formload or some initialization function.

picCanvas.Image = (Bitmap)_original.Clone();

edited Feb 02 '11 at 11:21

answered Feb 02 '11 at 09:33

honibis

811
1
5
13

Thanks. I needed to make a slight change as the paint event never seemed to receive a "_drag" value of true so would never draw but you got me close enough. – fluent Feb 02 '11 at 10:53
I forgot to add line for graphics object. Please see the edited code. – honibis Feb 02 '11 at 11:19
Thats even better. many thanks. I still need to call picCanvas.Invalidate after drawing or it nevers seems to push my drawing to the screen. – fluent Feb 02 '11 at 12:42

fluent · Answer 3 · 2011-03-02T16:17:33.307

0

Using the above answer from Honibis I ended up with this.

load in the image and invalidate the picture to cause a refresh

picCanvas.Image = image;
picCanvas.Invalidate()

then in the paint event

private void picCanvas_Paint(object sender, PaintEventArgs e)
{
  if (_drag)         
  {
    using (Pen pen = new Pen(Color.White, 2))
    {
      e.Graphics.DrawEllipse(pen, pos.X, pos.Y, 10, 10);
    }
  }
}

edited Mar 02 '11 at 16:17

answered Feb 02 '11 at 10:54

fluent

2,393
4
22
32

Dragging graphics objects on top of bitmaps

3 Answers3