JavaFX: Snakes And Ladders - 在 GridPane 中表示蛇和梯子图像

Question

我正在制作蛇梯游戏。您看到的 10x10 矩阵是一个 GridPane，其中每个单元格都包含一个彩色窗格。

问题：我想放置图像而不是你在上面看到的代表蛇和梯子的箭头。

Is spanning multiple columns a solution? Because for example at cell 3 to 37 the ladder needs to be a bit rotated.

编辑：这是我关于 GridPane 的代码：

<GridPane fx:id="gameGrid" alignment="CENTER" hgap="2.0" style="-fx-background-color:#000" vgap="2.0" BorderPane.alignment="CENTER">
    <columnConstraints>
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    </rowConstraints>
    <children>
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="9" />
    </children>
    <BorderPane.margin>
       <Insets bottom="5.0" top="5.0" />
    </BorderPane.margin>
  </GridPane>

FXML 设计是：http://prntscr.com/k8fpys

Answer 1

我找到了解决办法！！！层次结构是：

我使用 BorderPane 作为基础。
- 在 CENTER 我放置了一个普通的窗格 （窗格没有任何限制，所以它对我来说非常有用）。
  1. 我使用了 GridPane，每个单元格都包含一个 Pane。
  2. 我将图像缩放到我想要的任何位置并将它们设置为 disabled 并将 mouseTransparent 设置为 true.

如您所见，图像位于 GridPane 之上，我在 GridPane 的每个单元格中使用了窗格，因此我可以应用onMouseClick 处理程序。

JavaFX: Snakes And Ladders - 在 GridPane 中表示蛇和梯子图像

JavaFX: Snakes And Ladders - Represent snakes and ladders images in a GridPane

javafx

gridpane