how to undo the paint operation using c#

Question

I have a image loaded in picturebox.I perform a paint operation on the image, by the mouseclick event.It paints a small rectangular area with black color, when the mouse is clicked at that point.now I want to implement the undo operation for this .When i click a button the last paint operation should be undone.Here is my code for paint operation..

      private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
    {

            rect.Width = 0;
            rect.Height = 0;
            pictureBox1.Invalidate();


            int radius = 10; //Set the number of pixel you want to use here
            //Calculate the numbers based on radius
            int x0 = Math.Max(e.X - (radius / 2), 0),
                y0 = Math.Max(e.Y - (radius / 2), 0),
                x1 = Math.Min(e.X + (radius / 2), pictureBox1.Width),
                y1 = Math.Min(e.Y + (radius / 2), pictureBox1.Height);
            Bitmap bm = pictureBox1.Image as Bitmap; //Get the bitmap (assuming it is stored that way)
            for (int ix = x0; ix < x1; ix++)
            {
                for (int iy = y0; iy < y1; iy++)
                {
                    bm.SetPixel(ix, iy, Color.Black); //Change the pixel color, maybe should be relative to bitmap
                }
            }
            pictureBox1.Refresh(); //Force refresh
          }

Any one please help me how i can undo the last operation performed.

Answer 1

You can declare a private Image field and save image state to it for use in undo, using Memento Design Pattern to save and load object "image" state is the best practice, take a loot at it.

However instead of one undo/redo operation a better solution is to implement multi-undo/redo strategy as the following:

• Declare two stacks one for undo and the other for redo:
• When undo pop the action "image" or "image state" from undo stack and push it to the redo stack.
• When redo pop the action "image" or "image state" from redo stack and push it to the undo stack.

Example:

private Stack<Image> _undoStack = new Stack<Image>();
private Stack<Image> _redoStack = new Stack<Image>();

private readonly object _undoRedoLocker = new object();

private void Undo()
{
    lock (_undoRedoLocker)
    {
        if (_undoStack.Count > 0)
        {
            _redoStack.Push(_undoStack.Pop());

            //OnUndo();
            pictureBox1.Image = _redoStack.Peek();
            pictureBox1.Refresh();
        }
    }
}

private void Redo()
{
    lock (_undoRedoLocker)
    {
        if (_redoStack.Count > 0)
        {
            _undoStack.Push(_redoStack.Pop());

            //OnRedo();
            pictureBox1.Image = _undoStack.Peek();
            pictureBox1.Refresh();
        }
    } 
}

//And whenever image need to be modified, add it to the undo stack first and then modify it
private void UpdateImageData(Action updateImage)
{
    lock (_undoRedoLocker)
    {
        _undoStack.Push(pictureBox1.Image);//image);

        try
        { 
            //manipulate the image here.
            updateImage();
        }
        catch
        {
            _undoStack.Pop();//because of exception remove the last added frame from stack
            throw;
        }
    }
}

private void pictureBox1_MouseClick(object sender, EventArgs e)
{
    UpdateImageData(delegate()
    {
        rect.Width = 0;
        rect.Height = 0;
        pictureBox1.Invalidate();

        int radius = 10; //Set the number of pixel you want to use here
        //Calculate the numbers based on radius
        int x0 = Math.Max(e.X - (radius / 2), 0),
            y0 = Math.Max(e.Y - (radius / 2), 0),
            x1 = Math.Min(e.X + (radius / 2), pictureBox1.Width),
            y1 = Math.Min(e.Y + (radius / 2), pictureBox1.Height);
        Bitmap bm = pictureBox1.Image as Bitmap; //Get the bitmap (assuming it is stored that way)
        for (int ix = x0; ix < x1; ix++)
        {
            for (int iy = y0; iy < y1; iy++)
            {
                bm.SetPixel(ix, iy, Color.Black); //Change the pixel color, maybe should be relative to bitmap
            }
        }
        pictureBox1.Refresh(); //Force refresh
    }
}

• Whenever user want to undo "for instance presses Ctrl+Z" on the form just call Undo();
• Whenever user want to redo on the form just call Redo();

Note: I didn't test the above code but it should be working probably, if you find any issue leave a comment

Answer 2

One way to do this is to store the bitmap as it was before the last operation, and simply redraw that bitmap onto the picturebox. This may not be the most efficient as the bitmaps may get quite large, depending on their size but is one of the simplest and quickest ways.

Another, more efficient, way would be to record the difference between the before and after bitmaps somehow, such as the pixels that have changed and their before colour, and rollback these pixels to their original colour. This then only saves the pixels that have changed, but is more complicated to code.

Answer 3

Because you're working with raster image in memory you cannot just undo the operation. There can be multiple solutions to this:

1. Keep the original image in memory and for each operation keep the drawing parameters: what was drawn, where, which color. When you will need an undo you will just have to repeat all the operation from the first to last (you may also have a control points where you store an intermediate image)
2. After each operation keep the snapshot of the image - this will be very memory consuming. On undo - restore the previous picture in the list.
3. Keep the changed pixels - on each operation analyze the previous image and new one and keep the pixels changes. You will be able to revert to previous by copying those pixels back.