Question

我正在尝试使用JavaFX制作应用程序。

我想要做的是窗口顶部有MenuBar，中间有Canvas。我也希望窗口能够调整大小。参考以下链接，其中显示了如何使Canvas可调整大小，我首先编写了以下代码：

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的中心区域。

然后我尝试在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））

然而，虽然我减小了宽度，但画布的宽度不会减小，换句话说，适合窗口的大小。（图（3））

身高也是如此。

有人有想法解决这个问题吗？我的Java版本是1.8.0_71。

The screenshots of the window

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);

如何将JavaFX Canvas嵌入BorderPane？

1 个答案: