我需要制作一个棋盘游戏,用户可以在其中选择图像并将其用作棋盘。图像部分很简单,但我需要帮助来了解如何根据用户输入制作大小相等的网格。例如,可能有 10x10 网格或 50x50。
我目前的方法是让 StackPane 在 ImageView 上有一个 GridPane。所有这些都在 ScollPane 中,因此图像可以尽可能大。
还有其他更好的方法吗?谢谢。
是的,为您的电路板使用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);
}
}
}
}
正如您在问题中提到的那样,您可以使用StackPane和ImageView分层在您的板网格正方形后面,但这并不是绝对必要的。
相反,我会使用之前链接的井字游戏中的一些更新的 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);
}