JavaFX pannable GridPane

Question

For my current project, I need a large even grid with a transparent background that one can zoom and pan across. I initially tried to use a ScrollPane with its setPannable(true), but soon discovered that a scrollpane background will remain opague even when you call setStyle("-fx-background-color: transparent") or setStyle("-fx-background: transparent"). So with that easy option eliminated, I need to make the GridPane in question directly pannable.

I've tried several things already, including trying to bind the mouse position to the GridPane's Translate property(which quite simply didn't work), and I failed to get the more promising alternative to work properly:

    GridPane gridView = new GridPane();
    int x;
    int y;
    gridView.setOnDragEntered( (event) -> {
        x = event.getX();
        y = event.getY();
    });
    gridView.setOnDragDetected( (event) -> {
        gridView.setTranslateX(X - event.getX());
        gridView.setTranslateY(Y - event.getY());
    });

However, this only makes the map jump up and to the left, rather than to make it slowly pan with the mouse as intended.

Could you possibly use draw lines on a Canvas instead of having a grid pane? — Steven, Sep 13 '16 at 05:15
I don't think so, because each square on the grid needs to contain a node which triggers an event depending on its location and the data being represented within that square. — narf0708, Sep 13 '16 at 15:47
Check this out and see if it's something you might be able to use. http://stackoverflow.com/questions/33534594/generating-an-n-x-n-grid/33535310#33535310. It's in Swing, but you can transfer it to FX. Also, Spanning and Zooming can be another property that changes x and y position. If this solution is acceptable, I'll help you code Zooming and panning. — Steven, Sep 13 '16 at 20:37
Can you place the GridPane within a StackPane within the ScrollPane, with the content that needs to appear under the grid lower down on the StackPane? — Geoff, Sep 15 '16 at 02:44

score 1 · Accepted Answer · answered Sep 14 '16 at 11:33

Managed to mostly figure it out. The one remaining problem is that the GridPane is rather jittery when it is panned, but it's at an acceptable level for now.

    int x = 0;
    int y = 0;
    gridView.setOnMouseDragged((event) -> {
        if(x != 0){ //prevent from panning before values are initialized
            gridView.setTranslateX( gridView.getTranslateX() + limit(event.getX() - x, 25));
            gridView.setTranslateY( gridView.getTranslateY() + limit(event.getY() - y, 25));
        }
        x = (int)event.getX();
        y = (int)event.getY();
    });

Where the Limit(double num, double limit) method limits the input num to the range [-limit, limit]. Reducing the limit decreases the jitter, but it does so at the expense of decreasing responsiveness as well.

JavaFX pannable GridPane

1 Answers1