Move Image inside the Picturebox using mouse events

Question

I have this code where I upload/place an image inside a pictureBox. What I want to do now is to drag it inside the pictureBox using MouseEvents. How do I do that when my Image is drawn using another class?

Image Class

public void ImageDrawing(Bitmap bm, RectangleF rect, PaintEventArgs e)
    {
        this.image = bm;
        this.width = rect.Width;
        this.height = rect.Height;
        this.rect = rect;
        Graphics g = e.Graphics;
        bm = ImageClass.GrayscaleImage(bm);
        bm.MakeTransparent(Color.White);
        g.DrawImage(bm, rect);
    }

Main Form

private void btn_Browse_Click(object sender, EventArgs e)
    {
        PaintImage();
    }
    public void PaintImage()
    {
        buttons = (Shape.ShapeType)System.Enum.Parse(typeof(Shape.ShapeType), "image");
        // open file dialog   
        OpenFileDialog open = new OpenFileDialog();
        // image filters  
        open.Filter = "Image Files(*.jpg; *.jpeg; *.gif; *.bmp); *.PNG|*.jpg; *.jpeg; *.gif; *.bmp; *.PNG";
        if (open.ShowDialog() == DialogResult.OK)
        {
            //Display image in picture box  
            string strType = Path.GetExtension(open.FileName);
            FileInfo fs = new FileInfo(open.FileName);
            long fileSize = fs.Length / 1024;
            ImageBitmap = new Bitmap(open.FileName);
        }
        imageHeight = ImageBitmap.Height / 3f;
        imageWidth = ImageBitmap.Width / 3f;
        imageX = (shape.center.X - (imageWidth / 2));
        imageY = (shape.center.Y - (imageHeight / 2));
        imageRect = new RectangleF(imageX, imageY, imageWidth, imageHeight);
        pictureBox_Canvass.Refresh();
    }

Answer 1

I have implemented moving the image inside the picture box by mouse dragging using TaW's code as reference. Please see the events for the picturebox Mouse and Paint.

// Global Variables
private int _xPos;
private int _yPos;
private bool _dragging;
Image _img;
Rectangle _imgRect;

private void pictureBox1_MouseUp(
  object sender, MouseEventArgs e) {
  var c = sender as PictureBox;
  if (null == c) return;
  _dragging = false;
}

private void pictureBox1_MouseDown(
  object sender, MouseEventArgs e) {
  if (e.Button != MouseButtons.Left) return;
  _dragging = true;
  _xPos = e.X;
  _yPos = e.Y;
}

private void pictureBox1_MouseMove(
  object sender, MouseEventArgs e) {
  if (!_dragging || _img == null ) return;

  if (e.Button == MouseButtons.Left) {
    _imgRect = new Rectangle(-(_xPos-e.X), -(_yPos - e.Y), _img.Width, _img.Height);     
    pictureBox1.Invalidate();
  }
}

private void pictureBox1_Paint(
object sender, PaintEventArgs e) {      
  if (_img != null) {
    e.Graphics.DrawImage(_img, _imgRect);
  }    
}

Answer 2

Use the MouseMove event and a Mousebutton check to determine the top/left of the target rectangle. (Or maybe the center?)

Then trigger the Paint event by calling pBox.Invalidate() !

Example:

ImageClass anImage = null;

private void pb_canvas_Paint(object sender, PaintEventArgs e)
{
    anImage.ImageDrawing(anImage.image, anImage.rectangle, e);
}

private void pb_canvas_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button.HasFlag(MouseButtons.Left))
    {
        anImage.rectangle = new Rectangle(e.X, e.Y, anImage.image.Width, anImage.image.Height );
        pb_canvas.Invalidate();
    }
}