Reputation: 1247

Move Image inside the Picturebox using mouse events

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();
    }

Upvotes: 2

Answers (3)

Marco Pardo

Reputation: 71

lmfernan's anwswer is good. However it is a bit flaky if you let go from the picture and drag it again (it resets)

I added an offset to this so the code remembers the offset of the picture.

// picturebox via main as pb
private Image picture = null;  // the picture itself
private int picture_offsetX = 0, picture_offsetY = 0;

private int _xPos = 0;  // mouseposition at MouseDown
private int _yPos = 0;  // mouseposition at MouseDown
private bool _dragging = false;
private Rectangle _imgRect = new Rectangle(0,0,0,0);

private void pb_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button != MouseButtons.Left)
        return;

    _dragging = true;
    _xPos = e.X;
    _yPos = e.Y;
}

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

    if (e.Button == MouseButtons.Left)
    {
        picture_offsetX = picture_offsetX - (_xPos - e.X);
        picture_offsetY = picture_offsetY - (_yPos - e.Y);
        _xPos = e.X;
        _yPos = e.Y;
        _imgRect = new Rectangle(picture_offsetX, picture_offsetY, picture.Width, picture.Height);

        pb.Invalidate();  // calls redraw (pb_Paint)
    }
}

private void pb_Paint(object sender, PaintEventArgs e)
{
    if (pb != null && _dragging)
    {
        e.Graphics.DrawImage(md_picture, _imgRect);
    }
}

Upvotes: 3

lmfernan

Reputation: 41

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);
  }    
}

Upvotes: 4

TaW

Reputation: 54433

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();
    }
}

Upvotes: 2

Move Image inside the Picturebox using mouse events

Answers (3)

Related Questions