C# ImageBox Clear Rectangle on MouseUp

Question

I have a panel with multiple picturebox created at runtime.

The user will create a rectangle on any picture box and the selected part will be displayed on a preview picturebox.

I have successfully done the above using the below code.

Question

1. I want to clear the selection rectangle at mouseup event. Used invalidate but not working. From how to clear the graphics(rectangle shape) in picturebox

2. Also, when I scroll the panel the same rectangle(mouse selection) is shown on all picturebox.

       private void Picture_Paint(object sender, PaintEventArgs e)
   {
       if (Rect!=null && Rect.Width>0 && Rect.Height>0)
       {
           e.Graphics.FillRectangle(selectionBrush, Rect);
       }
   }
   
   private void Picture_MouseDown(object sender, MouseEventArgs e)
   {
       RecStartpoint = e.Location;
       ((PictureBox)sender).Invalidate();
   }
   
   private void Picture_MouseMove(object sender, MouseEventArgs e)
   {
       if (e.Button != MouseButtons.Left) return;
   
       Point tempEndPoint = e.Location;
       Rect.Location = new Point(
           Math.Min(RecStartpoint.X, tempEndPoint.X),
           Math.Min(RecStartpoint.Y, tempEndPoint.Y));
       Rect.Size = new Size(
           Math.Abs(RecStartpoint.X - tempEndPoint.X),
           Math.Abs(RecStartpoint.Y - tempEndPoint.Y));
       ((PictureBox)sender).Invalidate();
   }
   
   private void Picture_MouseUp(object sender, MouseEventArgs e)
   {
       if (e.Button != MouseButtons.Left) return;
   
       PictureBox org_pic = (PictureBox)(sender);
   
       Point RecEndpoint=e.Location;
   
   
       int xDown = Math.Min(RecStartpoint.X,RecEndpoint.X);
       int yDown = Math.Min(RecStartpoint.Y, RecEndpoint.Y);
       int xUp = Math.Max(RecStartpoint.X,RecEndpoint.X);
       int yUp = Math.Max(RecStartpoint.Y,RecEndpoint.Y);
   
       Rectangle rec = new Rectangle(xDown, yDown, Math.Abs(xUp - xDown), Math.Abs(yUp - yDown));
   
       xDown = xDown * org_pic.Image.Width / org_pic.Width;
       yDown = yDown * org_pic.Image.Height / org_pic.Height;
   
       xUp = xUp * org_pic.Image.Width / org_pic.Width;
       yUp = yUp * org_pic.Image.Height / org_pic.Height;
   
       rectCropArea = new Rectangle(xDown, yDown, Math.Abs(xUp - xDown), Math.Abs(yUp - yDown));
   
       pictureBox_preview_photo.Refresh();
       Bitmap sourceBitmap = new Bitmap(org_pic.ImageLocation);
       Graphics g = pictureBox_preview_photo.CreateGraphics();
       g.DrawImage(sourceBitmap, new Rectangle(0, 0, pictureBox_preview_photo.Width, pictureBox_preview_photo.Height), rectCropArea, GraphicsUnit.Pixel);
   
   }
   

Answer 1

I would try this approach:

First, make Image variable, in the scope of form

public partial class Form1 : Form
{
    //variable for holding original image, before rectangle is drawn on it
    Image originalImage = null;

    public Form1()
    {
        InitializeComponent();
    }
    //rest of form's code...

second, save current picture in that variable on MouseDown

private void Picture_MouseDown(object sender, MouseEventArgs e)
{
    //save it
    startImage = ((PictureBox)sender).Image;
    RecStartpoint = e.Location;
    ((PictureBox)sender).Invalidate();
}

lastly, on the end of MouseUp event, set Rectangle's width and height to zero and restore saved, original image

//snipped code
pictureBox_preview_photo.Refresh();
Bitmap sourceBitmap = new Bitmap(org_pic.ImageLocation);
Graphics g = pictureBox_preview_photo.CreateGraphics();
g.DrawImage(sourceBitmap, new Rectangle(0, 0, pictureBox_preview_photo.Width, pictureBox_preview_photo.Height), rectCropArea, GraphicsUnit.Pixel);

//make rectangle's widht and height 0 so that Paint event won't draw it
Rect.Width = Rect.Height = 0;
//restore image
this.Picture.Image = startImage;

I didn't understand that second question.