1

我需要制作一个棋盘游戏,用户可以在其中选择图像并将其用作棋盘。图像部分很简单,但我需要帮助来了解如何根据用户输入制作大小相等的网格。例如,可能有 10x10 网格或 50x50。

我目前的方法是让 StackPane 在 ImageView 上有一个 GridPane。所有这些都在 ScollPane 中,因此图像可以尽可能大。

还有其他更好的方法吗?谢谢。

4

1 回答 1

1

是的,为您的电路板使用GridPane


我在井字游戏中使用了相同的方法——效果很好。

class BoardSkin extends GridPane {
  BoardSkin(Board board) {
    getStyleClass().add("board");

    for (int i = 0; i < 3; i++) {
      for (int j = 0; j < 3; j++) {
        add(board.getSquare(i, j).getSkin(), i, j);
      }
    }
  }
}

正如您在问题中提到的那样,您可以使用StackPaneImageView分层在您的板网格正方形后面,但这并不是绝对必要的。

相反,我会使用之前链接的井字游戏中的一些更新的 css。要将棋盘图像分层放在网格方块后面,请将棋盘图像设置为网格的背景图像。

.board {
  -fx-hgap: 10px;
  -fx-vgap: 10px;
  -fx-background-image: url('http://www.woodge.com/books/maps/map_Narnia.jpg');
  -fx-background-size: cover;
  -fx-background-position: center;
}

.square {
  -fx-padding: 10px;
  -fx-background-color: rgba(100, 100, 100, 0.4);
}

桌游背景

于 2013-04-22T01:13:39.307 回答