Zooming / stretching a picturebox on current mouse position?

Question

Q: How can I implement zooming on current mouse position over a picturebox, something like zooming in Google Maps?

I am designing a simple GIS / map engine as my thesis work. The application is designed in such a way that the maps are being loaded into tabs of a sligtly modified tabcontrol.

Maps are standard JPEG or PNG format digital images and most of them have very high resolutions (2000x2000px and up).

They are loaded in pictureboxes that are added as subcontrols of tabpages. I've implemented a simple zooming method as a button click event that only zooms to the center of the image/picturebox.

What i would like to do is implement the zooming on a mousewheel event in that way that the picture is being zoomed on the current mouse position inside of the picturebox.

The code for zooming in currently looks like this:

            timesZoomed += 1;
            zoomRatio += 0.1f;
            pbxMapa.Width = pbxMapa.Width * zoomRatio;
            pbxMapa.Height = pbxMapa.Height * zoomRatio;
            pbxMapa.Location = new Point((this.Width / 2) - (pbxMapa.Width / 2), this.Height / 2) - (pbxMapa.Height / 2));

• The default "zoomRatio" value is 1, and it is being increased up to 0.6f.
• Argument "timesZoomed" default value is 0, it goes up to 6.
• "pbxMapa" is the picturebox with the loaded image of the map. "ImageSizeMode" prop of the picturebox is set to "Zoom", but the size of the picturebox is set to the full size of the loaded map image.

Also, i was experimenting with this simple zooming code. The calculation is somewhat effective, but still it has quite an offset when zooming/multiplying with a bigger ratio:

                pbxMapa.Location = new Point(pbxMapa.Location.X + (int)((pbxMapa.Location.X * zoomRatio - mouseXPbx) / 8), pbxMapa.Location.Y + (int)((pbxMapa.Location.Y * zoomRatio - mouseYPbx) / 8));

• "mouseXPbx" and "mouseYPbx" variables represent the current mouse position inside of the "pbxMapa". I divided by 8 for minimizing the offset in the positioning.

Any help and suggestions is appreciated, thanks in advance.

Rear

How can i zoom or stretch the picturebox on mouse position? Something like the zooming in on google maps? – Rear

And whats is wrong with your code? Sorry cant get where is the problem. Have you tried to read any articles? Here's one interesting – Hexavalent

Nothing is wrong with my code, it is zooming in to the center like its supposed to. I need help with the second code sample, it isn't zooming like it should ... there is some offset when i try to zoom to current mouse position. Thanks for the article btw. – Rear

You are moving the control so the relative mouse position changes. This is just not the right way to do it, draw the map in the Paint event instead with e.Graphics.DrawImage. And use e.Graphics.TranslateTransform and ScaleTransform to move and scale the image. – Superhighway

Answer 1

the code below zoomed and stretched the pictureBox on the current mouse position

pictureBox1.Width = (int)(pictureBox1.Width * zoomratio );
pictureBox1.Height = (int)(pictureBox1.Height * zoomratio );                
pictureBox1.Top = (int)(e.Y - zoomratio * (e.Y - pictureBox1.Top));
pictureBox1.Left = (int)(e.X - zoomratio * (e.X - pictureBox1.Left));

Hassler

@Hassler what is the zoomratio please update your answer to make full answer please I would like to give +1 – Monsoon

@J3soon please you too if you can help – Monsoon

@Monsoon Go see OP's question, zoomratio is just a number that controls zoom in / out. If it's > 1 then it's zoom in, otherwise it's zoom out. – Revelatory

@Revelatory it wont work correctly it is just moving the image... someone give his experience with this issue – Monsoon

Answer 2

I managed to tweak the calculation of the location in this line of code. It's working fine, it is zooming just the way I need it.

pbxMapa.Location = new Point(pbxMapa.Location.X + (int)(((pbxMapa.Location.X - mouseXPbx) / 10) * zoomRatio), pbxMapa.Location.Y + (int)(((pbxMapa.Location.Y - mouseYPbx) / 10) * zoomRatio));

Rear