java - 在 GridPane JavaFx 中选择单元格

Question

长话短说，我有 8x8 GridPane(将其用作棋盘)，我希望能够单击每个单元格并获取其坐标。

public class BoardView {     
    private ImageView imageView = new ImageView(new Image("board.png"));
    private GridPane boardGrid = new GridPane();

    public void createBoard(){
        boardGrid.getChildren().add(imageView);
        for(int i =0;i < 8; i++){
            for(int j = 0; j < 8; j++){
                Tile tile = new Tile(i, j);
                GridPane.setConstraints(tile.getPane(), i, j);
                boardGrid.getChildren().add(tile.getPane());
            }
        }

    }

    class Tile {
        private int positionX;
        private int positionY;
        private Pane pane;

        Tile(int x, int y) {
            pane = new Pane();                
            positionX = x;
            positionY = y;
            pane.setOnMouseClicked(e -> {
                        System.out.println(positionX + " " + positionY);
                    }
            );
        }
    }

但是，我点击的任何地方，结果都是“0 0”，而不是实际的行/列位置。

Answer 1

您的代码不完整，您的一些错误是:

1. 您尚未指定每个 Pane (图 block )的具体尺寸(宽度、高度)

2. 我猜测您在某处设置了 GridPane 的大小，但这只是猜测，现在我不建议您在 Grid 上添加背景图像，而是使用 StackPane。

这是一个小示例，您可以检查它来调试您的问题。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BoardView extends Application {

    // the dimensions of our background Image
    private final int BORDER_WIDTH = 695;
    private final int BORDER_HEIGHT = 720;

    @Override
    public void start(Stage stage) throws Exception {

        // Load your Image
        ImageView backgroundImageView = new ImageView(
                new Image("https://cdn.pixabay.com/photo/2013/07/13/10/24/board-157165_960_720.png"));
        // Initialize the grid
        GridPane boardGrid = initBoard();
        // Set the dimensions of the grid
        boardGrid.setPrefSize(BORDER_WIDTH, BORDER_HEIGHT);

        // Use a StackPane to display the Image and the Grid
        StackPane mainPane = new StackPane();
        mainPane.getChildren().addAll(backgroundImageView, boardGrid);

        stage.setScene(new Scene(mainPane));
        stage.setResizable(false);
        stage.show();

    }

    private GridPane initBoard() {
        GridPane boardGrid = new GridPane();

        int tileNum = 8;
        double tileWidth = BORDER_WIDTH / tileNum;
        double tileHeight = BORDER_HEIGHT / tileNum;

        for (int i = 0; i < tileNum; i++) {
            for (int j = 0; j < tileNum; j++) {
                Tile tile = new Tile(i, j);
                // Set each 'Tile' the width and height
                tile.setPrefSize(tileWidth, tileHeight);
                // Add node on j column and i row
                boardGrid.add(tile, j, i);
            }
        }
        // Return the GridPane
        return boardGrid;
    }

    class Tile extends Pane {
        private int positionX;
        private int positionY;

        public Tile(int x, int y) {
            positionX = x;
            positionY = y;
            setOnMouseClicked(e -> {
                System.out.println(positionX + " " + positionY);
            });
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

从我的角度来看，如果您创建类来扩展 Pane 而不是仅仅保留对它的引用，那么处理每个图 block 会更容易，但这只是我的意见。无论如何，上面只是一个例子。如果您找不到问题，请发布 MCVE 显示，我们可以更好地帮助您。