Skip to main content

Zoom Pictures with SwingLabs FX

Posted by gfx on September 3, 2005 at 1:25 AM PDT

Zoomable Image Panel

I read many Java forums and answer to a lot of questions about Java and Swing people send me by email. During the past few years, I've often seen users asking how to create a component which would let you display an image but also zoom in and out. I decided to take advantage of the SwingLabs FX module I recently introduced to provide such a component. As FX contains nice effects, I took my chance to mix everything together.

The Demo (run it)

This new demo is very similar to the one I made to present the CheckboardPanel and DropShadowPanel components. It actually uses them for better graphical result:

When you run the application, a picture is loaded into a org.jdesktop.swingx.ZoomableImagePanel. You can use the mouse wheel to zoom in or out but you can also drag the slider on the left. Here is an example with the same image zoomed in:

The API

While the component is still a bit crude, the API is really simple to use. Here is how you can create a new zoomable image with a zoom factor of 10% and a zoom level comprised between 25% and 400%:

Image image = ImageIO.read(new File("~/yosemite1.jpg"));
ZoomableImagePanel panel = new ZoomableImagePanel(image);

Getters and setters give you access to the zoom controls: minimum and maximum zoom level, zoom factor and current zoom level. The panel provides by default a support for the mouse wheel but you might want to disable it in certain cases (for instance, if you want the mouse wheel to scroll the enclosing scroll pane instead of zooming in and out):

panel.setMouseWheelSupportEnabled(false);

Finally you can change the displayed image at anytime:

panel.setImage(newImageInstance);

Do not forget that, as a panel, this component can embed children. The demo does not use this ability but puts the zoomable panel within a drop shadow panel, which in turn sits on top of a checkboard panel thanks to the stack layout.

Related Topics >>