JavaFX: Aligning multiple ImageViews in an ordered, bindable fashion

[ad_1]

I'm creating a Go-like program and have the board created, but I am stuck on how to align the positions where the pieces can be placed. My current plan is to have a grid of 19 by 19 empty ImageViews. When hovered over, those ImageViews will change their Image to translucentStone.png, and when a stone is placed in the location it will change the Image to blackStone.png or whiteStone.png.

With all the ImageViews set to translucentStone.png the board should look like so:

I've attempted to use a GridPane to align all these ImageViews properly as it logically seems to be the best option, however I can't get the ImageViews to line up properly with the linesBoard.png (this image is the black lines contained on the game board). It gets even worse when I try to bind the GridPane so it will grow/shrink appropriately with the gamesBoardPane or linesBoard objects when the application window changes size.

Another possible problem I see is that ImageView's can't be aligned based on their center x and y, so I'm not sure if that will prevent this behavior from being achieved.

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

public class Gomoku extends Application

@Override
public void start(Stage primaryStage) 
 StackPane gameBoardPane = new StackPane();

 ImageView woodBoard = new ImageView("image/woodBoard.png");
 ImageView linesBoard = new ImageView("image/linesBoard.png");
 Image translucentStone = new Image("image/translucentStone.png");
 Image whiteStone = new Image("image/whiteStone.png");
 Image blackStone = new Image("image/blackStone.png");

 woodBoard.fitHeightProperty().bind(gameBoardPane.heightProperty());
 woodBoard.fitWidthProperty().bind(gameBoardPane.heightProperty());

 linesBoard.fitHeightProperty().bind(gameBoardPane.heightProperty()
 .multiply(.9));
 linesBoard.fitWidthProperty().bind(gameBoardPane.heightProperty()
 .multiply(.9));

 gameBoardPane.getChildren().addAll(woodBoard, linesBoard);

 Scene scene = new Scene(gameBoardPane, 1000, 600);
 primaryStage.setScene(scene);
 primaryStage.setTitle("Gomoku");
 primaryStage.getIcons().add(whiteStone);
 primaryStage.show();

 

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

[ad_2]

لینک منبع