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.

How can i zoom or stretch the picturebox on mouse position? Something like the zooming in on google maps? — Filip Filipovic, May 16 '12 at 08:50
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](http://www.bobpowell.net/zoompicbox.htm) — Renatas M., May 16 '12 at 09:05
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. — Filip Filipovic, May 16 '12 at 09:31
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. — Hans Passant, May 16 '12 at 10:23

Ebro · Answer 1 · 2014-07-17T07:34:31.090

5

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

edited Jul 17 '14 at 07:34

answered Jul 14 '14 at 13:56

Ebro

61
1
5

@Ebro what is the `zoomratio` please update your answer to make full answer please I would like to give +1 – sam Oct 13 '18 at 00:46
@J3soon please you too if you can help – sam Oct 13 '18 at 00:47
@sam 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. – J3soon Oct 13 '18 at 11:25
@J3soon it wont work correctly it is just moving the image... someone give his experience with this issue – sam Oct 15 '18 at 19:07

score 0 · Answer 2 · answered May 18 '12 at 16:17

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

Zooming / stretching a picturebox on current mouse position?

2 Answers2

Linked