JavaFX - Get Coordinates of Node Relative to its Parent

Question

I am making a simple graphical interface for saving previously generated images. All images come to me square but I want to allow for some cropping functionality (more precisely cutting off equal parts from the bottom and top of the image). I want to do this by allowing the user to drag a shaded region over the image which will tell the user that this region will be cropped out. See the below image for details. To enable this drag functionality I have added small triangles that I want the user to drag which in turn will move the shaded regions about. However the coordinates for the triangles are all weird and seem nonsensical. Therefor I was wondering what the best way is to get the coordinates of the triangles in relation to the ImageView (or their first common parent node) in terms of ImageView-side-lengths. So if the triangle is in the center its coordinates are [0.5, 0.5] for instance.

The Image view will be moving around inside the scene and will also be changing size so it is vital that I can get the coordinates relative to not only the ImageView but also to the size of the ImageView.

Here is also the surrounding hierarchy of nodes if that helps. The Polygons are the triangles and the regions are the rectangles.

Thanks for all forms of help!

It's probably easier to get all the positions based on the scene coordinates. Just get the scene position of the triangles and the ImageView, then do your own maths. — Jai

fabian fabian · Accepted Answer · 2018-06-18T12:53:30

Node.getBoundsInParent returns the bounds of a node in it's parent coordinates. E.g. polygon.getBoundsInParent() would return the bounds in the VBox.

If you need to "go up" one additional step, you can use parent.localToParent to do this. vBox.localToParent(boundsInVbox) returns the bounds in the coordinate system of the AnchorPane.

To get values relative to the size of the image, you simply need to divide by it's size.

The following example only allows you to move the cover regions to in one direction and does not check, if the regions intersect, but it should be sufficient to demonstrate the approach.

The interesting part is the event handler of the button. It restricts the viewport of the second image to the part of the first image that isn't covered.

private static void setSideAnchors(Node node) {
    AnchorPane.setLeftAnchor(node, 0d);
    AnchorPane.setRightAnchor(node, 0d);
}

@Override
public void start(Stage primaryStage) {
    // create covering area
    Region topRegion = new Region();
    topRegion.setStyle("-fx-background-color: white;");
    Polygon topArrow = new Polygon(0, 0, 20, 0, 10, 20);
    topArrow.setFill(Color.WHITE);
    VBox top = new VBox(topRegion, topArrow);
    top.setAlignment(Pos.TOP_CENTER);
    topArrow.setOnMouseClicked(evt -> {
        topRegion.setPrefHeight(topRegion.getPrefHeight() + 10);
    });

    // create bottom covering area
    Region bottomRegion = new Region();
    bottomRegion.setStyle("-fx-background-color: white;");
    Polygon bottomArrow = new Polygon(0, 20, 20, 20, 10, 0);
    bottomArrow.setFill(Color.WHITE);
    VBox bottom = new VBox(bottomArrow, bottomRegion);
    bottom.setAlignment(Pos.BOTTOM_CENTER);
    bottomArrow.setOnMouseClicked(evt -> {
        bottomRegion.setPrefHeight(bottomRegion.getPrefHeight() + 10);
    });

    Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
    ImageView imageView = new ImageView(image);

    setSideAnchors(top);
    setSideAnchors(bottom);
    setSideAnchors(imageView);
    AnchorPane.setTopAnchor(top, 0d);
    AnchorPane.setBottomAnchor(bottom, 0d);
    AnchorPane.setTopAnchor(imageView, 0d);
    AnchorPane.setBottomAnchor(imageView, 0d);

    AnchorPane container = new AnchorPane(imageView, top, bottom);

    ImageView imageViewRestricted = new ImageView(image);

    Button button = new Button("restrict");
    button.setOnAction(evt -> {
        // determine bouns of Regions in AnchorPane
        Bounds topBounds = top.localToParent(topRegion.getBoundsInParent());
        Bounds bottomBounds = bottom.localToParent(bottomRegion.getBoundsInParent());

        // set viewport accordingly
        imageViewRestricted.setViewport(new Rectangle2D(
                0,
                topBounds.getMaxY(),
                image.getWidth(),
                bottomBounds.getMinY() - topBounds.getMaxY()));
    });

    HBox root = new HBox(container, button, imageViewRestricted);
    root.setFillHeight(false);

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}

JavaFX - Get Coordinates of Node Relative to its Parent

1 Answers