Pan and Zoom Very Large Images

Smoothly panning and zooming very large images can be a challenge. Here’s a control, with source code, that demonstrates one way of overcoming this challenge, as well as a few "Extra" image processing features.

Note: This was written against .NET 2.0, then manually converted to .NET 1.1.

Introduction

I recently wrote an article showing a simple method for panning an image. The code worked very well for small to moderate sized images. However, when using very large images, the performance degraded significantly.

That article used a picture box within a panel, and used the auto scroll functionality of the panel to perform scrolling. I received quite a bit of feedback indicating the need for a version that could handle very large images and still pan very smoothly. I also received requests for ideas on how to zoom the image in and out. So, I got to work.

What I came up with is a control that could smoothly pan super-sized images, and also provided zoom functionality. My tests were with a 49MB GIF (7000 x 7000). The performance was very smooth. Of course, the control works equally as well with small images. The control is demonstrated in the included sample project.

This custom control does not use a picture box, nor does it inherit from one. Neither is there a panel or any "auto-scrolling". This is very different and very much a better way of panning an image (in my opinion). An added benefit to this example is the ability to zoom the image without resizing a picture box (which can get quite large in memory).

How It Works

Only paints the part of the image currently visible.

Double-buffering provides flicker free panning.

GDI+ automatically scales the image for us.

Public Properties

Public Property PanButton() As System.Windows.Forms.MouseButtons

Public Property ZoomOnMouseWheel() As Boolean

Public Property ZoomFactor() As Double

Public Property Origin() As System.Drawing.Point

Public Shadows

Public Shadows Property Image() As System.Drawing.Image

Public Shadows Property initialimage() As System.Drawing.Image

Public Methods

Public Sub ShowActualSize()

Public Sub ResetImage()

Using the control is as simple as using a standard PictureBox. First, drop the control on a form, then when you need to show an image, you can do it this way:

Dim bmp AsNew Bitmap("Image.jpg")
Me.ImageViewer1.Image = bmp

Don't forget to change the filename!

It is important to note: If you are working with very large images, you should not pre-load them in the designer. This seriously bloats the project, and can result in "Out of Memory" issues. Instead, load your images during run-time.

Default Behavior

Panning the image: Click and hold the left mouse button while the cursor is over the image. Then, simply move your mouse around, with the button still depressed.

Zooming: Make sure the control has focus (click the image). Then, use your mouse wheel to zoom in and out.

Customized Usage

You can tell the control what button to use for panning, with the "PanButton" property. You can turn off the default zooming by setting the ZoomOnMouseWheel property to False.

You can manually set the zoom factor so you could implement your own zoom functionality (i.e., using a slider, or buttons).

You can move the image around programmatically by setting the origin. The origin property gets or sets the coordinates of the top left corner of the viewable window in relation to the original image. For example, if you wanted to see the bottom right corner of an image with a size of 5000 x 5000, and your viewable control size was 500 pixels x 500 pixels, you could set the origin to 4500, 4500. This assumes, of course, that you have a zoom factor of 1 (not zoomed in or out).

You could catch the paint event of the control and overlay your own graphics. Just be careful to take the zoom factor into consideration if you need to draw at precise coordinates in relation to the original image.

Scrollbars

Due to popular demand, scrollbars have now been implemented.

Double Buffering

Double buffering is accomplished by setting the control styles in the constructor as such:

PublicSubNew()
MyBase.New()
'This call is required by the Windows Form Designer.
InitializeComponent()
'Add any initialization after the InitializeComponent() callMe.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
Me.SetStyle(ControlStyles.DoubleBuffer, True)
EndSub

Just In Time Painting?

Well, sort of. While we do have a copy of the image in memory, we only paint the area currently viewable.

Note that we are taking the current zoom factor into consideration when drawing. By using the DrawImage method of the Graphics object, GDI will scale the image from the source area to fit the destination area.

Panning the Image

The code for panning the image and keeping the zoom factor in mind, is as follows:

Conclusion

Many of the concepts used within this example project are worthy of their own discrete articles. Therefore, I didn't go into any great detail about what double buffering is, nor did I dive into the intricacies of GDI+ in .NET. However, I hope that I have adequately covered the basics of how this control works, as well as how you can use it.

Please Note...

This is by no means meant to be a complete solution, nor is this code "production-ready". Then too, there are usually many ways to solve a problem; this is one. Hopefully, though, this sample has proven beneficial in some way. Perhaps, this article has given you a great idea about how to do this a better way, or an idea for expanding what is presented here. Great! That's why I wrote it. Please feel free to leave some feedback. Let me know how it went for you. If you do have an idea on how to improve this example or this article, please let me know that too.

License

Share

About the Author

I started my career in software development back in 2000. Prior to that, I made my living as a detail drafter. My true start in programming, though, goes back much further. I first started learning to program when I was about 10 years old. It was back in ‘82 that I wrote my first application. It was a simple calculator program written on a TRS-80 that my uncle had. Since then, I’ve programmed in Basic, QuickBasic, Pascal, C++, VB 6, VB.NET, Java, HTML, and C #. I have a very diverse background. I’ve worked and written software for several types of companies, including manufacturing, engineering, and finance. I’ve had the opportunity to design and maintain a few enterprise level databases, I’ve written applications to run on windows CE, in a wireless manufacturing environment. I’ve also had opportunities to teach OOP methodologies, and design patterns. I thoroughly enjoy what I do, and my only regret is that I didn’t start sooner.

Just found this after trying various other methods to pan and zoom very large bitmaps. You make it look so easy! Thank you very much for doing this, I'm just looking into modifying it to zoom on mouse pointer position instead of the control's centre.

I did the same thing to use the mouse scroll wheel to allow zooming.
To do this, get the image coordinates of the mouse position BEFORE the zoom. Magnify / zoom the image then get the image coordinates AFTER the magnification. Use the delta (before and after) to adjust the image origin so that same image point under the mouse remains constant. This works perfectly unless you're zooming near an edge since as implemented the origin can't be negative, nor greater than the image width or height.

First, thank you for the ideas in your article/code. I have been wrestling with a similar kind of control of my own and your approach is very similar to mine.

My question is if there is any particular reason why you chose to derive the DrawingBoard class from a UserControl instead of a Panel, or perhaps something else.
As near as I can tell, the various properties, methods, and events provided by either UserControl or a Panel are the same, at least as far as the ones you use/override.

hi，i just use your control to open a image which has a size of 6000 * 8000.it had a good performance.But i found that the scaling quality was very low.Then I looked at your source and found that the 'InterpolationMode' has been set as 'InterpolationMode.NearestNeighbor'.I tried to put it into 'InterpolationMode.Low' and run it.This time scale slowing down a lot.Is there any other way to to improve the scaling speed?I'm curious that the Windows photo viewer how do it.Once i used it to open a image with the size of 16GB and it worked well.
Please forgive my poor English.I come from China and English is a headache thing to me.
Thank you for your sharing

I am not sure if this is a bug or not, but when you set the property of the ImageControl's StrechImageToFit = True, the zooming capability is disabled. Was this intended or how do I allow both stretch to fit and zoom?

I'am using this control in c# application. I have already implemented mouse_click event and center image if not zoomed in but there is a bug, when i'am zoomed out, so scroll bars are not active, then when i click in to the picture it will not return me pixel position value, because the bounds are still set in the left upper corner. Can somebody post me a fix. It's difficult to search in code which i have not written.

Second issue is, if there is some way to zoom not on the center of image but on the mouse cursor.

This is an excellent control! I have been trying to get pictureboxes to behave this way for about a week now. I was close using graphics methods but those are limited by the amount of memory the picture needs so it would fail on large pictures. Yours works so well! Thank you so much for writing this!

I cannot for the life of me scroll an image. When I try to set the 'imagecontrol1.origin.x = some value', it says that the expression is a value and cannot be the target of an assignment. (Same thing for the y value)
Perhaps I’m overlooking something simple, but any insight into this would be greatly appreciated.
Other that programically scrolling the image, it works great.