Question

I owned complex drawing code with GDI+ which draws something like a chart on a user control.
If the user clicks with control pressed, a vertical marker line in dash style should be shown.

Now I look for a way to extend the drawing code without touching the complex drawing code.

I created a marker class which attaches to the mouse-up event of the user control.
In the eventhandler a check against (ModifierKeys == Keys.Control) is done.

If the user holds the control key and click with the left mouse button the draw method of the marker class is called with the Graphics object of the usercontrol as a parameter.

The current behaviour is that for each click a new line is drawn, but the line should be deleted and a new one should be drawn.

How can i erase the drawed line?

Do I have to redraw the comlete content of the user control?

Answer 1

The answer here is clearly yes. With GDI+ you just draw directly on a bitmap buffer, so if you want to undo a previous drawing operation you can do one of those things (depending on the complexity of the issue and performance):

• restore the bytes that have been changed on the bitmap buffer
• reload a previous state of the drawing bitmap

A simple solution would be to have 2 bitmaps (something like that is usually called double buffering). One that is shown currently (and contains the final state) and one that is used for preview only. The preview one is always a copy of the first one – just with current modifications.

So basic algorithm for this simple implementation:

• start with two bitmaps (blank but identical sizes) [named A and B]
• if the user draws a line always make a copy of the bitmap A in B and draw on B – show B
• if the user finishes the line then make a copy of B in A and again – show B

So always show the preview bitmap, which is just a modified bitmap of the original one.

Here is an example programming code in C# (assuming all events are connected and the preview Bitmap, B, is the picture box itself (which is just named pictureBox1 here):

Bitmap bmp;
bool isDrawing;
Point previous;

void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    isDrawing = true;
    previous = e.Location;
}

void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    isDrawing = false;
}

void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (isDrawing)
    {
        using (Graphics g = Graphics.FromImage(bmp))
        {
            double wf = (double)bmp.Width / (double)pictureBox1.Width;
            double hf = (double)bmp.Height / (double)pictureBox1.Height;
            g.ScaleTransform((float)wf, (float)hf);
            g.DrawLine(Pens.Black, e.Location, previous);
        }

        pictureBox1.Refresh();
        previous = e.Location;
    }
}

This code will do everything to display drawing a straight line from a point to another by simply pressing the left mouse button.