I am implementing a board game where i have an image of the board and the coordinates of the field where a player can move. the board should resize when the window gets resized while maintaining its aspect ratio. The initial size of the board is 1000(width) x 750(height). The fields on the board should also resize when the board's size increases. The size of field is 60x60.
For this implementation, I have used a borderpane, which consists of a pane in the center of it. The pane acts as a container for all the fields and the board image. I have an imageview inside the pane for the board image.
gamePaneImageView.setImage(image);
gamePaneImageView.preserveRatioProperty().set(true);
gamePaneImageView.fitWidthProperty().bind(gamePane.widthProperty());
gamePaneImageView.fitHeightProperty().bind(gamePane.heightProperty());
gamePaneImageView.fitWidthProperty().addListener((observable, oldValue, newValue) ->
updateCoordinatesOnResize(gamePaneImageView.getFitWidth(), gamePaneImageView.getFitHeight()));
gamePaneImageView.fitHeightProperty().addListener((observable, oldValue, newValue) ->
updateCoordinatesOnResize(gamePaneImageView.getFitWidth(), gamePaneImageView.getFitHeight()));
Now the board gets resized perfectly when and maintains aspect ratio. But the problem is that i have stackpanes containing imageviews on specific coordinates.
stackPane.prefWidthProperty().bind(gamePaneImageView.fitWidthProperty().divide(BOARD_BASE_WIDTH).multiply(FIELD_SIZE));
imgView.fitWidthProperty().bind(stackPane.prefWidthProperty());
stackPane.prefHeightProperty().bind(gamePaneImageView.fitHeightProperty().divide(BOARD_BASE_HEIGHT).multiply(FIELD_SIZE));
imgView.fitWidthProperty().bind(stackPane.prefHeightProperty());
These coordinates, i update when resizing. But now i get behaviour like this:
Desired working behavior.
Even though my image maintains the ratio, my imageview resizes and that hinders with my calculations of the coordinates. This is my code for updating coordinates:
private void updateCoordinatesOnResize(double newWidth, double newHeight) {
if (defaultCoordinatesList==null)
return;
StackPane stackPane;
for (int i = 0; i < defaultCoordinatesList.size(); i++) {
updatedCoordinatesList.get(i).setX((int) (defaultCoordinatesList.get(i).getX() * (newWidth / BOARD_BASE_WIDTH)));
updatedCoordinatesList.get(i).setY((int) (defaultCoordinatesList.get(i).getY() * (newHeight / BOARD_BASE_HEIGHT)));
stackPane = (StackPane) gamePane.getChildren().get(i + 1);
stackPane.setLayoutX(updatedCoordinatesList.get(i).getX() - stackPane.getPrefWidth() / 2);
stackPane.setLayoutY(updatedCoordinatesList.get(i).getY() - stackPane.getPrefHeight() / 2);
}
}
What can i do. I want the imgeview to not increase in size when the image is not resizing. One probable solution could be with hbox and vbox to maintain ratio but i dont know how to use it.

