javafx - 使用 JavaFX 创建六边形字段

Question

我的目标是创建一个六边形瓷砖场。我已经有了一个单元格矩阵，每个单元格都足够高以适应完整的六边形图像:

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.stage.Stage;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;

public class UITest extends Application {
    final private static String TILE_IMAGE_LOCATION = System.getProperty("user.dir") + File.separatorChar +"resources"+ File.separatorChar + "blueTile.png";
    final private static Image HEXAGON_IMAGE = initTileImage();

    private static Image initTileImage() {
        try {
            return new Image(new FileInputStream(new File(TILE_IMAGE_LOCATION)));
        } catch (FileNotFoundException e) {
            throw new IllegalStateException(e);
        }
    }
    public void start(Stage primaryStage) {
        int height = 4;
        int width = 6;
        GridPane tileMap = new GridPane();
        Scene content = new Scene(tileMap, 800, 600);
        primaryStage.setScene(content);

        for (int y = 0; y < height; y++) {
            for (int x = 0; x < width; x++) {
                ImageView tile = new ImageView(HEXAGON_IMAGE);
                GridPane.setConstraints(tile, x, y);
                tileMap.getChildren().add(tile);
            }
        }

        primaryStage.show();
    }
}

我的问题不是垂直间隙，我可以通过将 GridPane 的 vGap() 添加到适当的值来确定。对我来说，困难是每第二行向右移动半个单元格宽度。

我试图将两个 GridPanes 放在彼此之上，一个包含奇数行，一个包含偶数行，目的是为其中一个添加填充，完全移动它。然而，据我所知，除了将 GridPanes 嵌套到另一个上之外，没有办法做到这一点。

我怎样才能最好地实现每隔一行移动一次？

(我在 ${projectroot}/resources/ 文件夹中预期的代码中引用的图像: )

Answer 1

我花了一些时间才弄明白。我希望它有所帮助。我不使用图像。它由多边形组成，您可以自定义描边和填充颜色以及宽度。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Paint;
import javafx.scene.shape.Polygon;

public class UITest extends Application {
    public void start(Stage primaryStage) {
        int height = 600;
        int width = 800;
        AnchorPane tileMap = new AnchorPane();
        Scene content = new Scene(tileMap, width, height);
        primaryStage.setScene(content);
        double size = 50,v=Math.sqrt(3)/2.0;
        for(double y=0;y<height;y+=size*Math.sqrt(3))
        {
            for(double x=-25,dy=y;x<width;x+=(3.0/2.0)*size)
            {
                Polygon tile = new Polygon();
                tile.getPoints().addAll(new Double[]{
                    x,dy,
                    x+size,dy,
                    x+size*(3.0/2.0),dy+size*v,
                    x+size,dy+size*Math.sqrt(3),
                    x,dy+size*Math.sqrt(3),
                    x-(size/2.0),dy+size*v
                });
                tile.setFill(Paint.valueOf("#ffffff"));
                tile.setStrokeWidth(2);
                tile.setStroke(Paint.valueOf("#000000") );
                tileMap.getChildren().add(tile);
                dy = dy==y ? dy+size*v : y;
            }
        }
        primaryStage.show();
    }
    public static void main(String[] args)
    {
        launch(args);
    }
}