dynamic images in C#

[walid86]

hi there, i'm creating an app in C# which allows users to select an image by double clicking the "pictureBox1", from there it selects the image, creates a new Graphics object and passes the Bitmap to it.

Once the picture has been loaded the user should be able to move the picture around using the mouseDown, mouseMove, mouseUp events.

I have got the image to load correctly, but it does not move.. if i alter the code, it moves, but the user is unable to select a new image(by double clicking), and it will just load a box with a red border instead.

I am fairly new to C#, so i'm learning as i go. Any tips or advice will be appriciated.

these are my methods:.

private void pictureBox1_DoubleClick(object sender, EventArgs e)
        {
            if (pictureBox1.Image != null) //check if picture is already there, if so, delete it.
            {
                pictureBox1.Image.Dispose();

            }
            openFD.InitialDirectory = "C:";
            openFD.Title = "Select an Image";
            openFD.FileName = "";
            openFD.Filter = "JPEG Images|*.jpg|GIF Images|*.gif|BMP Images|*.bmp";
            if (openFD.ShowDialog() == DialogResult.Cancel)
            {
                MessageBox.Show("cancelled");
            }
            else
            {
                Chosen_File = openFD.FileName;
                MyBitmap = Image.FromFile(Chosen_File);
                
                // Create graphics object for alteration.
                newGraphics = Graphics.FromImage(MyBitmap);
                pictureBox1.Image = MyBitmap;
                this.Refresh();
            }
        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            isDragging = true;
            oldX = e.X;
            oldY = e.Y;

        }
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {

 if (isDragging)
 {


     xMouse = e.X;

         yMouse = e.Y;
         Refresh();
     }
        } 
  private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            isDragging = false;
            newX = e.X;
            newY = e.Y;
        }
        private void pictureBox1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
        {

            Graphics g = e.Graphics;

            g.DrawImage(pictureBox1.Image, xMouse, yMouse);
        }

[ddanbe]

Hi Walid, welcome on the Daniweb site :)
I like to know what the meaning of newGraphics is on line 22 of your code.
Could you not plain and simply write
pictureBox1.Image = Image.FromFile(openFD.FileName);
on line 23 and remove lines 18 - 22 ?

[walid86]

newGraphics is meant to be a new Graphics object which is assigned to the Image which the user selects.. I read somewhere that to have the image updating, you use drawImage. So i was trying to pass the image to the graphics object, but i just realised its never used. instead i'm creating a new graphics g = e.graphics.

[ddanbe]

OK, the following code is still far from perfect,but "works". Look for yourself:

private void pictureBox1_DoubleClick(object sender, EventArgs e)
        {
            //if (pictureBox1.Image != null) //check if picture is already there, if so, delete it.
            //{
            //    pictureBox1.Image.Dispose();

            //}
            openFD.InitialDirectory = "C:";
            openFD.Title = "Select an Image";
            openFD.FileName = "";
            openFD.Filter = "JPEG Images|*.jpg|GIF Images|*.gif|BMP Images|*.bmp";
            if (openFD.ShowDialog() == DialogResult.Cancel)
            {
                MessageBox.Show("cancelled");
            }
            else
            {
                pictureBox1.Image = Image.FromFile(openFD.FileName);
                this.Refresh();
            }

        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            isDragging = true;
            oldX = e.X;
            oldY = e.Y;

        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                pictureBox1.Location= new Point( e.X, e.Y);
                //xMouse =;
                //yMouse = e.Y;
                Refresh();
            }
        }

        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            isDragging = false;
            //newX = e.X;
            //newY = e.Y;

        }

[nick.crane]

Just could not resist trying this.
The code below moves the image inside the PictureBox; the PictureBox does not move.
The code paints the image in the PictureBox explicitly in the Paint event handler.
In fact this will paint the image on to any control; it could be a Panel or event the base Form.

It only handles one image but could be made to handle more by using arrays or collections in place of loadedImage and imageBounds.

Hope you like it.

private void pictureBox1_DoubleClick(object sender, EventArgs e)
{
	openFD.InitialDirectory = "C:";
	openFD.Title = "Select an Image";
	openFD.FileName = "";
	openFD.Filter = "JPEG Images|*.jpg|GIF Images|*.gif|BMP Images|*.bmp";
	if (openFD.ShowDialog() == DialogResult.OK)
	{
		// load image to image object
		loadedImage = Image.FromFile(openFD.FileName);
		// set initial rectangle bounds for image
		imageBounds = new Rectangle(new Point(), loadedImage.Size);
		// refresh the picture box to show new image
		pictureBox1.Refresh();
	}
}

Image loadedImage = null; // image loaded from file
Rectangle imageBounds = new Rectangle(); // current position of image
Size SizeOfImageOffset;	// offset of image relative to mouse while moving
bool imageClicked = false; // flag indicating mouse clicked on image

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
	// test if mouse click inside image bounds
	imageClicked = imageBounds.Contains(e.Location); 
	// capture relative position of mouse to Top,Left of image
	SizeOfImageOffset = (Size)imageBounds.Location - (Size)e.Location; 
}

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
	// if image was clicked and mouse is captured
	if (imageClicked && pictureBox1.Capture)
	{
		// set new location for image based on relative mouse position
		imageBounds.Location = (Point)(SizeOfImageOffset + (Size)e.Location);
		// force re-paint of picture box
		pictureBox1.Refresh();
	}
}

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
	// always paint the image on the box (after it is loaded)
	if (loadedImage != null)
		e.Graphics.DrawImage(loadedImage, imageBounds);
}

[walid86]

works great thanks!... I see you declared a new Image outside the methods(constructors) which is probably why you can reference it in any method now, i.e, Paint method, and selecting the image... something which didn't work for me before.. thank you all!.