Question

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

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

跨越多列是解决方案吗？因为例如在单元格3 到37，梯子需要旋转一点。

编辑：这是我有关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，我放置了一个普通的 Pane （Panes没有任何约束，因此对我来说非常有用）。
  1. 我使用了 GridPane ，每个单元格包含一个 Pane 。
  2. 我可以根据需要缩放图像并将其设置为disabled，并将 mouseTransparent 设置为 true 。

如您所见，图像位于 GridPane 的顶部，并且我在 GridPane 的每个单元格中使用了窗格，因此我可以应用 {{1} } 处理程序。

JavaFX：蛇和梯子-表示GridPane中的蛇和梯子图像

1 个答案: