JavaFX resize rotated object to GridPane cell

Question

I have a problem with the orientation of a node (GridPane) after rotating it with setRotate() in JavaFX. When i rotate the node and put it in a cell of the GridPane, I would like the rotated node to fit inside the cell and also resize with the cell. I added some sample code to show you what I would like the result to be.

public class MonopolyApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        //Construction of the grid
        GridPane square = new GridPane();
        square.setGridLinesVisible(true);
        final int heightPercent = 14;
        final int widthPercent = 8;

        RowConstraints rowsEdge = new RowConstraints();
        rowsEdge.setPercentHeight(heightPercent);
        RowConstraints rowsMid = new RowConstraints();
        rowsMid.setPercentHeight(widthPercent);
        ColumnConstraints colEdge = new ColumnConstraints();
        colEdge.setPercentWidth(heightPercent);
        ColumnConstraints colMid = new ColumnConstraints();
        colMid.setPercentWidth(widthPercent);

        square.getColumnConstraints().addAll(colEdge, colMid,
                colMid, colMid, colMid, colMid, colMid, colMid, colMid, colMid, colEdge);
        square.getRowConstraints().addAll(rowsEdge, rowsMid,
                rowsMid,rowsMid,rowsMid,rowsMid,rowsMid,rowsMid, rowsMid,rowsMid, rowsEdge);

        GridPane wrongSuare = makeMonopolySquare();
        square.add(wrongSuare, 0, 4);
        wrongSuare.setRotate(90);

        GridPane rightSquare = makeMonopolySquare();
        square.add(rightSquare, 1, 10);

        Scene s = new Scene(square);
        primaryStage.setHeight(500);
        primaryStage.setWidth(500);
        primaryStage.setScene(s);
        primaryStage.show();

    }

    public static void main(String[] args) {
        Application.launch(args);
    }

    private GridPane makeMonopolySquare(){
        GridPane monopolySquare = new GridPane();


        RowConstraints top = new RowConstraints();
        top.setPercentHeight(20);

        RowConstraints bottom = new RowConstraints();
        bottom.setPercentHeight(80);

        ColumnConstraints  c = new ColumnConstraints();
        c.setPercentWidth(100);

        monopolySquare.getRowConstraints().addAll(top,bottom);
        monopolySquare.getColumnConstraints().addAll(c);
        bottom.setValignment(VPos.CENTER);

        monopolySquare.setGridLinesVisible(true);

        Label name = new Label("name");
        Pane colorPane = new Pane();
        colorPane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        colorPane.setBackground(new Background( new BackgroundFill(Color.BLUE, null, null)));
        GridPane.setMargin(colorPane, new Insets(1));

        monopolySquare.add(colorPane,0,0);
        monopolySquare.add(name, 0, 1);

        return monopolySquare;
    }
}

If you run the code you will see that the GridPane at the bottom of the stage perfectly fits it's cell. But the rotated GridPane does not. I will also add a picture to show you what my problem is:

Does anyone know how to solve this? I know that I could put it in a group, but the problem with putting it in a group is that the group would not resize to the cell of the GridPane.

score 0 · Answer 1 · answered Mar 01 '16 at 09:53

Well, that is a tough one. No optimal solution comes to mind, but if I was in your position, I would try to stay within the confinements of the layout (not use low-level operations like rotation).

For example, build a differently layout cell for each row/column:

private static Node makeMonopolySquare( final Layout layout )
  {
    final GridPane monopolySquare = new GridPane();
    monopolySquare.setGridLinesVisible( true );
    final Label label = new Label( "name" );
    final StackPane name = new StackPane( label );
    final Pane colorPane = new Pane();
    GridPane.setMargin( colorPane, new Insets( 1 ) );
    colorPane.setMaxSize( Double.MAX_VALUE, Double.MAX_VALUE );
    colorPane.setBackground( new Background( new BackgroundFill( Color.BLUE, null, null ) ) );
    final RowConstraints top = new RowConstraints();
    final RowConstraints bottom = new RowConstraints();
    //    bottom.setValignment( VPos.CENTER );
    //    top.setValignment( VPos.CENTER );
    final ColumnConstraints c = new ColumnConstraints();
    c.setPercentWidth( 100 );
    final ColumnConstraints right = new ColumnConstraints();
    //    right.setHalignment( HPos.CENTER );
    final ColumnConstraints left = new ColumnConstraints();
    //    left.setHalignment( HPos.CENTER );
    final RowConstraints r = new RowConstraints();
    r.setPercentHeight( 100 );

    switch ( layout )
    {
      case BOTTOM:
        top.setPercentHeight( 20 );
        bottom.setPercentHeight( 80 );

        monopolySquare.getRowConstraints().addAll( top, bottom );
        monopolySquare.getColumnConstraints().addAll( c );

        monopolySquare.add( colorPane, 0, 0 );
        monopolySquare.add( name, 0, 1 );
        break;
      case LEFT:
        right.setPercentWidth( 20 );
        left.setPercentWidth( 80 );

        monopolySquare.getColumnConstraints().addAll( left, right );
        monopolySquare.getRowConstraints().addAll( r );

        monopolySquare.add( name, 0, 0 );
        monopolySquare.add( colorPane, 1, 0 );
        break;
      case RIGHT:
        right.setPercentWidth( 80 );
        left.setPercentWidth( 20 );

        monopolySquare.getColumnConstraints().addAll( left, right );
        monopolySquare.getRowConstraints().addAll( r );

        monopolySquare.add( colorPane, 0, 0 );
        monopolySquare.add( name, 1, 0 );
        break;
      case TOP:
        top.setPercentHeight( 80 );
        bottom.setPercentHeight( 20 );

        monopolySquare.getRowConstraints().addAll( top, bottom );
        monopolySquare.getColumnConstraints().addAll( c );
        bottom.setValignment( VPos.CENTER );

        monopolySquare.add( colorPane, 0, 1 );
        monopolySquare.add( name, 0, 0 );
        break;
    }

This however, will not rotate the label (which, I would argue is better anyways for a digital monopoly board ;) ). As soon as you rotate the label, you get the same problem you had with the cell, only smaller.

The full code example.

JavaFX resize rotated object to GridPane cell

1 Answers1