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

一些建议：

不要使用BorderPane来使组件居中;为此目的使用StackPane。
要强制节点大小跟随另一个节点大小，您需要分别绑定max / min / pref大小。
使用注释来解释选择您选择的看似幻数值的基本原理（8,14,9,0.72，...）。
请提供完全自包含和可运行的示例。这使其他人更容易为您提供帮助。

以下是改进版本：

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。

Javafx 8 Monopoly Board布局与图像在板的中心

1 个答案: