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);
    }
}

See if you can use some ideas from https://stackoverflow.com/questions/54165602/create-hexagonal-field-with-javafx as a starting point. — SedJ601, Jun 04 '22 at 06:39
This [hexagons](https://github.com/linustornkrantz/hexagons) project is kind of interesting. — jewelsea, Jun 04 '22 at 07:15

Giovanni Contreras · Answer 1 · 2022-06-04T20:01:32.923

polygon hexagons

Since you need to use as buttons ; I added mouse click event wich changes stage's tittle . If you want to place hexagons side to side you may need to concider radius for x axis and apothem for y axis . this is afunctional 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;

        }

    }

}

score 3 · Answer 2 · answered Jun 04 '22 at 11:33

3

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.

answered Jun 04 '22 at 11:33

mipa

10,369
2
16
35

1

Agree, GridPanes are for layouts, but different kinds of layouts than this :-) – jewelsea Jun 05 '22 at 05:10

How to create hexagon of hexagons as buttons in JavaFX

2 Answers2

Linked