获取由 ImageViews 组成的 GridPane 以适应 BorderPane 的边距并调整大小

Question

我有一个关于我正在处理的 Uni-project 的问题。 我们必须创建一个游戏，其中我们有一个由瓷砖组成的板，您应该能够通过点击来旋转这些瓷砖。 瓷砖应始终适合网格，并且网格应随窗口调整大小。

现在我创建了一个“TileView”类，它扩展了 ImageView 以获得与瓷砖图案匹配的图片。 然后我有 TileGrid，它扩展了 GridPane，它应该由宽度*高度的 tileviews 组成。 这个 GridPane 在一个 BorderPane 中，这就构成了场景。 不幸的是，我不能真正把代码放在这里，因为我们有严格的抄袭规则（如果有人看到我的代码并复制它，我也会下台）。

因此，我为宽度和高度创建了 2 个 for 循环并创建了一个新的 TileView 并将 PreserveRatio 设置为 true，然后执行以下操作：

setRowIndex(temp, i);
setColumnIndex(temp, j);
super.getChildren().add(temp);

这是在类 TileGrid 中。

然后我将它添加到边距插入 100 的 BorderPane 中，这就是发生的情况：

https://imgur.com/a/OYSwER2

https://imgur.com/a/YUsZX09

但是现在我遇到了将 TileViews 拟合到网格大小并使它们随窗口调整大小的问题。 我试过（“temp”是刚刚创建的 ImageView，因为我把它们放在 TileGrid 中）：

temp.fitWidthProperty().bind(prefWidthProperty());
temp.fitHeightProperty().bind(prefHeightProperty());

但是我的单个 ImageViews 是巨大的。

https://imgur.com/a/zaCz3OB

这占满了我的整个屏幕。

我尝试了很多事情，搜索了几个小时，但从未实现我想要的结果，所以我真的希望有人可以帮助我或即使没有我的代码也能给我提示。

提前致谢！

Answer 1

由于您无法提供任何代码，因此我将尝试为您提供使用步骤，希望对您有所帮助
首先，当BorderPane和GridPane将它们的大小调整到窗口时，您会遇到一个问题，即调整ImageView的大小以使其可调整大小，您必须bind它们的大小bind到场景的大小并考虑您想要的网格的行和列
假设您有 2 列，因此图像占场景的 50%

imageView.fitWidthProperty().bind(scene.getWidthProperty().divide(2));

注意：我不确定这一行的语法我有点忙抱歉

Answer 2

这是一个演示您需要的 MCVE。

将 GridPane 内容居中

centerRoot.setAlignment(Pos.CENTER);

将 ImageViews 的 fitHeight 和 fitWidth 属性与 GridPanes 的高度和宽度属性绑定 - 100（由于 setMargins）/10（行/列数）

for (int i = 0; i < 10; i++) {
    for (int t = 0; t < 10; t++) {
         Image image = new Image("https://s3.amazonaws.com/media.eremedia.com/uploads/2012/08/24111405/stackoverflow-logo-700x467.png");
         ImageView imageView = new ImageView(image);
         imageView.fitHeightProperty().bind(centerRoot.heightProperty().subtract(100).divide(10));
         imageView.fitWidthProperty().bind(centerRoot.widthProperty().subtract(100).divide(10));
         imageView.setPreserveRatio(false);
         centerRoot.add(imageView, i, t);
     }
 }              

完整代码：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication241 extends Application
{

    @Override
    public void start(Stage primaryStage)
    {
        BorderPane root = new BorderPane();

        GridPane centerRoot = new GridPane();
        centerRoot.setAlignment(Pos.CENTER);
        GridPane.setMargin(centerRoot, new Insets(50, 50, 50, 50));
        root.setCenter(centerRoot);

        Scene scene = new Scene(root, 500, 500);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();

        for (int i = 0; i < 10; i++) {
            for (int t = 0; t < 10; t++) {
                Image image = new Image("https://s3.amazonaws.com/media.eremedia.com/uploads/2012/08/24111405/stackoverflow-logo-700x467.png");
                ImageView imageView = new ImageView(image);
                imageView.fitHeightProperty().bind(centerRoot.heightProperty().subtract(100).divide(10));
                imageView.fitWidthProperty().bind(centerRoot.widthProperty().subtract(100).divide(10));
                imageView.setPreserveRatio(false);
                centerRoot.add(imageView, i, t);
            }
        }
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }

}