[FIXED] Canvas and Anchorpane only get bigger on resize of window

Issue

I got a problem with JavaFX. When i resize my Window it automatically resizes the Anchorpane to fit. Also the canvas width and heigth propery got binded to the Anchorpane. So if the Anchorpane gets bigger through reszising of the Window itself the Canvas gets bigger too.

But here is the problem when i make the window smaller again width and heigth of everything stay the same. I dont really get the behaivor there.

So if after making the window bigger width and height are 100. Then after making the window smaller it still is 100 ... xD

Here is my Controller for the Canvas.

package de.schlo.spoteditor;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;

import java.net.URISyntaxException;

public class ControllerCanvas {
    @FXML
    Canvas canvas;
    @FXML
    Button btnPaint;
    @FXML
    Button btnClear;
    @FXML
    AnchorPane apCanvas;
    @FXML
    AnchorPane apGC;

    GraphicsContext gc;
    String imageURL = this.getClass().getClassLoader().getResource("000.jpg").toString();
    Image image = new Image(imageURL);

    @FXML
    public void initialize() throws URISyntaxException {
        gc = canvas.getGraphicsContext2D();
        gc.drawImage(image, 0, 0,canvas.getWidth(), canvas.getHeight());
        canvas.widthProperty().bind(apCanvas.widthProperty());
        canvas.heightProperty().bind(apCanvas.heightProperty());
    }

    @FXML
    private void paintAction(ActionEvent event) {
        gc.setFill(Color.DARKBLUE);
        gc.fillOval(65, 30, 30, 30);
    }

    @FXML
    private void clearAction(ActionEvent event) {
        gc.drawImage(image, 0, 0,canvas.getWidth(), canvas.getHeight());
        System.out.println(apCanvas.widthProperty().get());
        System.out.println(apCanvas.heightProperty().get());

        System.out.println(canvas.widthProperty().get());
        System.out.println(canvas.heightProperty().get());
        System.out.println();
    }
}

And my corresponding FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane fx:id="apGC" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.schlo.spoteditor.ControllerCanvas">
   <children>
      <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Button fx:id="btnPaint" mnemonicParsing="false" onAction="#paintAction" text="Paint" />
            <Button fx:id="btnClear" mnemonicParsing="false" onAction="#clearAction" text="Clean" />
            <AnchorPane fx:id="apCanvas" VBox.vgrow="ALWAYS">
               <children>
                  <Canvas fx:id="canvas" height="510.0" width="510.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
         </children>
      </VBox>
   </children>
</AnchorPane>

Solution

After trying around i found a easy solution.

The canvas is now wrapped in an ScrollPane which is wrapped inside an AnchorePane.

And now it works just fine :)

Answered By - Mosch
Answer Checked By - Marie Seifert (JavaFixing Admin)