Documentation


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()”.

Usage

  • Import the library into your Maven project:
<dependency>
    <groupId>com.github.dejv78.jfx.zoomfx</groupId>
    <artifactId>zoomfx</artifactId>
    <version>1.0.1</version>
</dependency>
  • Use the ZoomFX control in your FXML:
<!-- Import the ZoomFX class: -->
<?import dejv.jfx.zoomfx.ZoomFX?>

<AnchorPane 
    xmlns:fx="http://javafx.com/fxml" 
    fx:controller="myapp.MyAppFXMLController">

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

    <ZoomFX fx:id="zoomFX" 
        AnchorPane.leftAnchor="0" 
        AnchorPane.topAnchor="0" 
        AnchorPane.rightAnchor="0" 
        AnchorPane.bottomAnchor="0">

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

<!-- And add a box with some buttons to control the zoom...-->
    <VBox 
        AnchorPane.rightAnchor="30" 
        AnchorPane.topAnchor="0" 
        AnchorPane.bottomAnchor="0">

        <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%"/>
    </VBox>

</AnchorPane>
  • 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 {

    @FXML
    private ZoomFX zoomFX;

    @FXML
    private Button bOne;

    @FXML
    private Button bMinus;

    @FXML
    private Button bPlus;

    @FXML
    private Label zoomFactor;


    @FXML
    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():
        ScrollActionHandler
            .with(zoomProperties)
                .doOnScroll((event) -> zoomFX.zoom(event.getDeltaY()))
                .register(zoomFX.getViewport());

        DragActionHandler
            .with(panProperties)
                .doOnDragStart((event) -> zoomFX.startPan(event.getSceneX(), event.getSceneY()))
                .doOnDrag((event) -> zoomFX.pan(event.getSceneX(), event.getSceneY()))
                .doOnDragFinish((event) -> zoomFX.endPan())
                .register(zoomFX.getViewport());
    }
}

API Documentation

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