获取由ImageView组成的GridPane以适合BorderPane的边距并调整其大小

Question

我对正在从事的Uni项目有疑问。 我们必须创建一个游戏，在游戏中我们有一个由磁贴组成的面板，您应该能够通过单击旋转这些磁贴。瓦片应始终适合网格，并且网格应随窗口调整大小。

现在，我制作了一个“ TileView”类，该类扩展了ImageView以获取与图块图案匹配的图片。然后我有了TileGrid，它扩展了GridPane，它应该由width * height tileviews组成。而此GridPane位于BorderPane中，就构成了场景。 不幸的是，我不能真正将代码放在这里，因为我们有严格的of窃规则（如果有人看到我的代码并复制了它，我也会失望）。

因此，我对宽度和高度进行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它们的大小以适合场景的大小，并考虑到网格所需的行数和列数
假设您有2列，因此图像占场景的50％

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

注意：我不确定这行的语法，对此我感到很抱歉

Answer 2

这是演示您所需内容的MCVE。

使GridPane内容居中

select usename from pg_user , pg_group  where
pg_user.usesysid = ANY(pg_group.grolist) and 
pg_group.groname='<YOUR_GROUP_NAME>';

使用GridPanes的height和width属性绑定ImageViews的fitHeight和fitWidth属性-100（由于setMargins）/ 10（行/列数）

centerRoot.setAlignment(Pos.CENTER);

  

完整代码：

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);
     }
 }