ImageInspector: An Image Zoom & Pan Component05.11.2010
This type of component is becoming quite popular these days and for good reason: it makes it extremely easy to quickly zoom in and pan around an image. I imagine most all of us have seen an example of this but I’ve never found the code for one that suits my fancy. So here you go. Here are some possibly unique features I wanted and implemented along with the usual goodies:
ImageInspector works with images of any aspect ratio. Also, you’ll notice the picture-in-picture will size itself to the aspect ratio of the image. Just set maxWidth and maxHeight and it won’t get larger than those dimensional limits.
The focal point is maintained during scaling. For example, zoom in, move the focal point to the corner of the image, zoom out, then zoom in. Notice that, as you zoom out and in, the focal point is maintained as much as possible.
The focal point and relative scale are both maintained during resizing. For example, if an image inside ImageInspector is at 200% of its “fit” size, ImageInspector is 100% width and height of the window, and the user starts making the window larger, ImageInspector will continue to scale up the image inside it, attempting to keep it at 200% of its “fit” size. Likewise, the focal point will be maintained while resizing the window as well.
Right-click the demo app to view the source. The app might take a little while to load because it contains two embedded high-res images.