如何將JavaFX Canvas嵌入BorderPane？

Question

我正在嘗試使用JavaFX創建一個應用程序。

我想要做的是窗口，其頂部是MenuBar ，中間是Canvas 。 我也希望窗口能夠調整大小。 參考以下鏈接，其中顯示了如何使Canvas可調整大小，我首先做了以下代碼：

JavaFX技巧1：可調整大小的畫布 - DLSC

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class CanvasInBorderPane extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane borderPane = new BorderPane();

        // Put menu bar on the top of the window
        MenuBar menuBar = new MenuBar(new Menu("File"), new Menu("Edit"),
                new Menu("Help"));
        borderPane.setTop(menuBar);

        // Put canvas in the center of the window (*)
        Canvas canvas = new Canvas();
        borderPane.setCenter(canvas);
        // Bind the width/height property so that the size of the Canvas will be
        // resized as the window is resized
        canvas.widthProperty().bind(borderPane.widthProperty());
        canvas.heightProperty().bind(borderPane.heightProperty());
        // redraw when resized
        canvas.widthProperty().addListener(event -> draw(canvas));
        canvas.heightProperty().addListener(event -> draw(canvas));
        draw(canvas);

        Scene scene = new Scene(borderPane);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * Draw crossed red lines which each each end is at the corner of window,
     * and 4 blue circles whose each center is at the corner of the window,
     * so that make it possible to know where is the extent the Canvas draws
     */
    private void draw(Canvas canvas) {
        int width = (int) canvas.getWidth();
        int height = (int) canvas.getHeight();
        GraphicsContext gc = canvas.getGraphicsContext2D();
        gc.clearRect(0, 0, width, height);
        gc.setStroke(Color.RED);
        gc.strokeLine(0, 0, width, height);
        gc.strokeLine(0, height, width, 0);
        gc.setFill(Color.BLUE);
        gc.fillOval(-30, -30, 60, 60);
        gc.fillOval(-30 + width, -30, 60, 60);
        gc.fillOval(-30, -30 + height, 60, 60);
        gc.fillOval(-30 + width, -30 + height, 60, 60);
    }
}

然后我有一個像（1）的窗口（見下圖）

我知道這是因為Canvas應該的實際大小小於borderPane的大小。 但我不知道如何獲得BorderPane的CENTER區域。

然后，我嘗試將一個包裝器Pane放在borderPane的中心，並將Canvas嵌入其中，將包裝器Pane的寬度和高度綁定到Canvas 。 我更改了上面代碼的10+行，用於初始化Canvas （從帶有（*）的注釋行開始），如下所示：

        // Create a wrapper Pane first
        BorderPane wrapperPane = new BorderPane();
        borderPane.setCenter(wrapperPane);
        // Put canvas in the center of the window
        Canvas canvas = new Canvas();
        wrapperPane.setCenter(canvas);
        // Bind the width/height property to the wrapper Pane
        canvas.widthProperty().bind(wrapperPane.widthProperty());
        canvas.heightProperty().bind(wrapperPane.heightProperty());
        // redraw when resized
        canvas.widthProperty().addListener(event -> draw(canvas));
        canvas.heightProperty().addListener(event -> draw(canvas));
        draw(canvas);

然后發生了奇怪的事情 當我增加窗口的寬度時，一切都如我所想的那樣好。 （圖（2））

但是，雖然我減小了寬度，但Canvas的寬度不會減小，換句話說，適合窗口的大小。 （圖（3））

身高也是如此。

有人有想法解決這個問題嗎？ 我的Java版本是1.8.0_71。

窗口的截圖

Answer 1

使用普通Pane來包裝畫布，而不是BorderPane ：

    // Create a wrapper Pane first
    Pane wrapperPane = new Pane();
    borderPane.setCenter(wrapperPane);
    // Put canvas in the center of the window
    Canvas canvas = new Canvas();
    wrapperPane.getChildren().add(canvas);
    // Bind the width/height property to the wrapper Pane
    canvas.widthProperty().bind(wrapperPane.widthProperty());
    canvas.heightProperty().bind(wrapperPane.heightProperty());
    // redraw when resized
    canvas.widthProperty().addListener(event -> draw(canvas));
    canvas.heightProperty().addListener(event -> draw(canvas));
    draw(canvas);