Javafx 8 Monopoly Board 布局，图像位于板的中心

Question

我正在使用 javafx 8 制作一个垄断游戏，我偶然发现了一个让我忙了几个小时的问题。我使用以下类来渲染我的游戏板的视图：

public class SpelbordView extends GridPane {
    public Pane[] panes = new Pane[40];


    public SpelbordView() {
        initNodes();
        layoutNodes();
    }

    private void initNodes(){
    }

    private void layoutNodes(){
        RowConstraints rowsEdge = new RowConstraints();
        rowsEdge.setPercentHeight(14);
        RowConstraints rowsMid = new RowConstraints();
        rowsMid.setPercentHeight(8);

        ColumnConstraints colEdge = new ColumnConstraints();
        colEdge.setPercentWidth(14);

        ColumnConstraints colMid = new ColumnConstraints();
        colMid.setPercentWidth(8);

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



        BorderPane image = new BorderPane();
        this.add(image,1,1,9,9);

        image.maxHeightProperty().bind(this.heightProperty().multiply(0.72));
        image.maxWidthProperty().bind(this.widthProperty().multiply(0.72));



        ImageView imageView = new ImageView("monopoly/view/beginscherm/images/mlogo.png");
        imageView.setPreserveRatio(true);
        imageView.fitWidthProperty().bind(image.widthProperty().divide(2));
        imageView.autosize();

        image.setBackground(new Background(new BackgroundFill(MonopolyGUIItems.getMonopolyRed(),null,null)));
        image.setCenter(imageView);


        GridPane.setHalignment(image, HPos.CENTER);
        GridPane.setValignment(image, VPos.CENTER);


        BorderPane.setAlignment(image, Pos.CENTER);

        this.setGridLinesVisible(true);


        image.setPrefSize(getHeight()*0.72, getWidth()*0.72);
        image.autosize();

    }


}

它几乎完美无缺。但是当我将视图放到舞台上时，出现了问题。

当我启动应用程序时，阶段如下所示：

如您所见，我放置图像的边框与其他网格重叠。这不应该发生。奇怪的是，当我手动调整窗口大小时，边框会立即调整其尺寸以适合网格窗格的中心，如下所示：

有人知道这是什么原因吗？或者我的代码中缺少的任何内容。正如我所说，边框的尺寸仅在第一次渲染舞台时是错误的。每当我手动调整舞台大小时，无论我选择什么尺寸，中心的边框都会完美调整大小。

Answer 1

几个建议：

1. 不要使用BorderPane 使组件居中；为此目的使用StackPane。

2. 要强制一个节点大小跟随另一个，您需要分别绑定 max/min/pref 大小。

3. 使用 cmets 解释选择看似神奇的数字值（8,14,9,0.72,...）的基本原理。

4. 请提供完全独立且可运行的示例。这让其他人更容易帮助您。

这是一个改进的版本：

private void layoutNodes()
{
  final RowConstraints rowsEdge = new RowConstraints();
  rowsEdge.setPercentHeight( 14 );
  final RowConstraints rowsMid = new RowConstraints();
  rowsMid.setPercentHeight( 8 );

  final ColumnConstraints colEdge = new ColumnConstraints();
  colEdge.setPercentWidth( 14 );

  final ColumnConstraints colMid = new ColumnConstraints();
  colMid.setPercentWidth( 8 );

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

  final StackPane imagePane = new StackPane();
  this.add( imagePane, 1, 1, 9, 9 );

  final DoubleBinding multipliedHeight = this.heightProperty().multiply( 0.72 );
  final DoubleBinding multipliedWidth = this.widthProperty().multiply( 0.72 );

  imagePane.maxHeightProperty().bind( multipliedHeight );
  imagePane.maxWidthProperty().bind( multipliedWidth );
  imagePane.minHeightProperty().bind( multipliedHeight );
  imagePane.minWidthProperty().bind( multipliedWidth );
  imagePane.prefHeightProperty().bind( multipliedHeight );
  imagePane.prefWidthProperty().bind( multipliedWidth );

  final ImageView imageView =
    new ImageView( "http://1.bp.blogspot.com/-Wjc79oqi1y0/VHitLAU44BI/AAAAAAAAG80/0UZ9n2JmvEo/s1600/Logo%2BMonopoly.png" );
  imageView.setPreserveRatio( true );
  imageView.fitWidthProperty().bind( imagePane.widthProperty().divide( 2 ) );

  imagePane.setStyle( "-fx-background-color: red;" );
  imagePane.getChildren().add( imageView );

  this.setGridLinesVisible( true );
}

完整的例子可以在here找到。