How to create hexagon of hexagons as buttons in JavaFX

Question

I want to create a hexagon of hexagons as buttons in JavaFX, I use an image and try to position some buttons to the position of each hexagon but I cannot change the position of them in a grid pane. Here is my code:

package sample;

import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;

public class GameBoard extends GridPane {
    public GameBoard(){
        this.setAlignment(Pos.CENTER);
        ImageView image = new ImageView();
        Image hexagonImg = new Image("hexagon.jpg");
        image.setFitWidth(500);
        image.setFitHeight(500);
        image.setImage(hexagonImg);
        this.add(image,0,0);
        GridPane button1Pane = new GridPane();
        this.add(button1Pane,0,0);
        Button button1 = new Button();
        button1Pane.add(button1,1,0);
    }
}

Answer 1

polygon hexagons

Since you need to use as buttons, I added mouse click event which changes stage's title. If you want to place hexagons side to side you may need to consider radius for x axis and apothem for y axis. This is a functional single class javafx app you can try

App.java

public class App extends Application {

    @Override
    public void start(Stage stage) {

        double HexagonRadius = 100;

        Hexagon hexagon1 = new Hexagon(HexagonRadius, Color.CADETBLUE);

        Hexagon hexagon2 = new Hexagon(HexagonRadius, Color.MEDIUMPURPLE);
        hexagon2.setTranslateY(hexagon1.getOffsetY() * 2);

        Hexagon hexagon3 = new Hexagon(HexagonRadius, Color.MEDIUMSEAGREEN);
        hexagon3.setTranslateY(-hexagon1.getOffsetY() * 2);

        Hexagon hexagon4 = new Hexagon(HexagonRadius, Color.CORNFLOWERBLUE);
        hexagon4.setTranslateY(-hexagon1.getOffsetY());
        hexagon4.setTranslateX(hexagon1.getOffsetX());

        Hexagon hexagon5 = new Hexagon(HexagonRadius, Color.YELLOW);
        hexagon5.setTranslateY(-hexagon1.getOffsetY());
        hexagon5.setTranslateX(-hexagon1.getOffsetX());

        Hexagon hexagon6 = new Hexagon(HexagonRadius, Color.ORANGE);
        hexagon6.setTranslateY(hexagon1.getOffsetY());
        hexagon6.setTranslateX(-hexagon1.getOffsetX());

        Hexagon hexagon7 = new Hexagon(HexagonRadius, Color.SKYBLUE);
        hexagon7.setTranslateY(hexagon1.getOffsetY());
        hexagon7.setTranslateX(hexagon1.getOffsetX());

        Group hexagonsGroup = new Group(hexagon1, hexagon2, hexagon3, hexagon4, hexagon5, hexagon6, hexagon7);

        StackPane stackPane = new StackPane(hexagonsGroup);

        var scene = new Scene(stackPane, 640, 480);
        scene.setFill(Color.ANTIQUEWHITE);
        stage.setScene(scene);
        stage.show();
    }

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

    public class Hexagon extends Group {

        private Polygon polygon;
        private double radius;
        private double radianStep = (2 * Math.PI) / 6;

        private double offsetY;
        private double offsetX;

        public Hexagon(double radius, Paint color) {
            this.radius = radius;
            makeHexagon(radius, color);
            offsetY = calculateApothem();
            
            
            
            offsetX = radius * 1.5;
            changeTittle();

        }

        private void makeHexagon(double radius, Paint color) {
            polygon = new Polygon();
            this.getChildren().add(polygon);
            polygon.setFill(color);
            polygon.setStroke(Color.WHITESMOKE);
            polygon.setEffect(new DropShadow(10, Color.BLACK));
            polygon.setStrokeWidth(10);
            polygon.setStrokeType(StrokeType.INSIDE);

            for (int i = 0; i < 6; i++) {
                double angle = radianStep * i;

                polygon.getPoints().add(Math.cos(angle) * radius / 1.1);
                polygon.getPoints().add(Math.sin(angle) * radius / 1.1);

            }
        }

        public void changeTittle() {

            polygon.setOnMouseClicked(e -> {
                Stage stage = (Stage) this.getScene().getWindow();
                stage.setTitle(polygon.getFill().toString());
            });

        }

        public double getOffsetY() {
            return offsetY;
        }

        public double getOffsetX() {
            return offsetX;
        }

        private double calculateApothem() {
            
            return (Math.tan(radianStep) * radius) / 2;

        }

    }

}

Answer 2

I would just create a Path for each Hexagon and put them in Group which you can then place in the middle of some Pane. Dealing with images and a GridPane only complicates things. Just doing some graphics directly is much easier.