如何在JavaFX上绘制网格并用点绘制网格角？

Question

我是JavaFx的新手，我想知道如何绘制网格，我想在网格角上绘制点。我应该使用网格窗格作为基础还是线条图？使用网格并在其上绘制的最佳类是什么？

Answer 1

我不会使用 GridPane，因为它的子项不能保证大小相同，只能对齐它们的网格单元格边缘。

但是，TilePane 确实可以保证其单元格的大小相同。然后，您可以使用组将 TilePane 与节点（如圆圈）组合在一起，这些节点使用一些基本数学以网格单元格之间的点为中心：

public class Grid
extends Application {
    private int rows = 10;
    private int columns = 10;
    private int spacing = 8;

    @Override
    public void start(Stage stage) {
        TilePane pane = new TilePane(spacing, spacing);
        pane.setPrefColumns(columns);

        Group group = new Group(pane);

        for (int row = 1; row < rows; row++) {
            for (int col = 1; col < columns; col++) {
                Circle point = new Circle(2);
                point.setFill(Color.BLACK);
                // x = ((tilewidth + hgap) * col) - (hgap / 2)
                // y = ((tileheight + vgap) * row) - (vgap / 2)
                point.centerXProperty().bind(
                    pane.tileWidthProperty().add(pane.hgapProperty())
                        .multiply(col)
                        .subtract(pane.hgapProperty().divide(2)));
                point.centerYProperty().bind(
                    pane.tileHeightProperty().add(pane.vgapProperty())
                        .multiply(row)
                        .subtract(pane.vgapProperty().divide(2)));
                group.getChildren().add(point);
            }
        }

        // Example grid content
        for (int row = 0; row < rows; row++) {
            for (int col = 0; col < columns; col++) {
                Text text = new Text(String.valueOf(row * rows + col));
                pane.getChildren().add(text);
            }
        }

        stage.setScene(new Scene(group));
        stage.setTitle("Grid");
        stage.show();
    }
}