Canvas 和 Anchorpane 仅在 window 调整大小时变大

Canvas and Anchorpane only get bigger on resize of window

我遇到了 JavaFX 的问题。 当我调整 Window 大小时,它会自动调整 Anchorpane 的大小以适合。 canvas 宽度和高度 属性 也绑定到 Anchorpane。因此,如果 Anchorpane 通过调整 Window 本身变得更大,Canvas 也会变大。

但是,当我再次将 window 变小时,所有内容的宽度和高度都保持不变,这就是问题所在。我真的不明白那里的行为。

所以如果 window 变大后宽度和高度为 100。然后 window 变小后它仍然是 100 ... xD

这是我的 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();
    }
}

和我对应的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>

经过反复尝试,我找到了一个简单的解决方案。

canvas 现在包裹在一个 ScrollPane 中,而 ScrollPane 包裹在一个 AnchorePane 中。

现在一切正常:)