The zoomfx library contains a single control (dejv.jfx.zoomfx.ZoomFX), derived from a GridPane. This can be included in your applications scene graph, just like any other Pane.

Unlike other Panes, though (where the children nodes are usually accessed through “getChildren()”), ZoomFX children nodes (those, that you can zoom in/out), are added, or accessed through “getContent()”.


  • Import the library into your Maven project:
  • Use the ZoomFX control in your FXML:
<!-- Import the ZoomFX class: -->
<?import dejv.jfx.zoomfx.ZoomFX?>


<!-- Put the ZoomFX control into the pane (together with some content): -->

    <ZoomFX fx:id="zoomFX" 

        <Rectangle x="-100" y="100" width="200" height="200"/>

<!-- And add a box with some buttons to control the zoom...-->

        <Button fx:id="bOne" text="1:1"/>
        <Button fx:id="bPlus" text="Zoom in"/>
        <Button fx:id="bMinus" text="Zoom out"/>
<!-- ... and a label for the zoom factor -->
         <Label fx:id="zoomFactor" text="100%"/>

  • Next, you can initialize the control in the controller:

Note: Following code uses “jfx-input” library from my commons project. (Of course, you can achieve the same result using just the “vanilla” JavaFX)

public class MyAppFXMLController {

    private ZoomFX zoomFX;

    private Button bOne;

    private Button bMinus;

    private Button bPlus;

    private Label zoomFactor;

    public void initialize() {
        // Bind the zoom factor label to the zoomfactorProperty:
        zoomFX.zoomFactorProperty().addListener((prop, oldVal, newVal) -> zoomFactor.setText(String.format("%d%%", Math.round(newVal.doubleValue() * 100))));

        // Set the zoom factor to "1.0", when the "1:1" button is pressed:
        bOne.setOnAction((event) -> zoomFX.zoomFactorProperty().set(1.0));

        // Decrease the zoom factor, when the "Zoom out" button is pressed:
        bMinus.setOnAction((event) -> zoomFX.zoomFactorProperty().set(zoomFX.zoomFactorProperty().get() * 0.75));

        // Increase the zoom factor, when the "Zoom in" button is pressed:
        bPlus.setOnAction((event) -> zoomFX.zoomFactorProperty().set(zoomFX.zoomFactorProperty().get() * 1.25));

        // Use the "scroll" action (with no modifiers) to "zoom in/out":
        final GestureEventProperties zoomProperties = 
            new GestureEventProperties(GestureModifiers.none());
        // Use the "mouse drag" action (using middle mouse button 
        // with no modifier keys) to pan the contents:
        final MouseEventProperties panProperties =
            new MouseEventProperties(MouseModifiers.none(), MouseButtons.middle());

        // Set the actions, and register the handlers on zoomFX.getViewport():
                .doOnScroll((event) -> zoomFX.zoom(event.getDeltaY()))

                .doOnDragStart((event) -> zoomFX.startPan(event.getSceneX(), event.getSceneY()))
                .doOnDrag((event) -> zoomFX.pan(event.getSceneX(), event.getSceneY()))
                .doOnDragFinish((event) -> zoomFX.endPan())

API Documentation

  • Browse the API documentation here.
  • Download it here.