How to get the display area of a picture inside a picture box?

Question

I have 2 questions:

1. How to get the display area of a picture inside a picture box with a scale factor?
   • Example:
     • I have an image (1000 x 1000), my task is "get an area (600 x 600) of that image".
     • I create a form, then a panel with a picture box inside, picture box size is 400 x 400, make some code to allow user to drag image inside the box
     • I load the image into the picture box. Since the desired area is 600 x 600, but my box is 400 x 400 only, so I scale the image with the 0.67 factor.
     • User will select the desired area by dragging the image arround.
   • How can I get that area (from the original image)?
2. And if I allow user to zoom in/out in that picture box, how can I deal with it?

Answer 1

Because the image is scaled in picbox, you can not take the area directly from picbox. The trick is to un-scale the rectangle that the user select and tranform it to the original one.

You need two images:

Bitmap original600x600; //unscaled
Bitmap picBoxImage; //with 400x400 dimensions

when your form loads:

original600x600 = new Bitmap(600, 600);
//Draw the portion of your 1000x1000 to your 600x600 image
....
....

//create the image of your pictureBox
picBoxImage= new Bitmap(400, 400);

//scale the image in picBoxImage
Graphics gr;

gr = Graphics.FromImage(picBoxImage);

gr.DrawImage(original600x600, new Rectangle(0, 0, 400, 400));

gr.Dispose();
gr = null;

pictureBox1.Image = picBoxImage; //If at any time you want to change the image of
                                 //pictureBox1, you dont't draw directly on the control
                                 //but on picBoxImage and then Invalidate()

When the user select a rectangle, lets call it rectangleSelect, on pictureBox1 you need to transform x, y, width, height of rectangle to the original one, the 600x600. You need some simple math:

//scaled                    unscaled             with precision
x      becomes -----------> x * (600 / 400)      (int)( (double)x * (600D / 400D) )
y      becomes -----------> y * (600 / 400)      (int)( (double)y * (600D / 400D) )
width  becomes -----------> width * (600 / 400)  (int)( (double)width * (600D / 400D) )
height becomes -----------> height * (600 / 400) (int)( (double)height * (600D / 400D) )

Hope this helps a little!