在代码中将组件添加到fxml

Question

I've got a fxml template

<VBox fx:id="playerAvatarBox" prefHeight="406.0" prefWidth="303.0" 
      xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.lapots.breed.editor.fx.controls.controller.CanvasDrawingController">
    <children>
        <Label text="Current representation" />
      <HBox prefHeight="24.0" prefWidth="303.0">
         <children>
            <ComboBox fx:id="layersBox" prefWidth="150.0" />
            <Button fx:id="addLayer" mnemonicParsing="false" onAction="#handleAddLayer" text="Add layer" />
         </children>
      </HBox>
      <Pane fx:id="canvasPane" prefHeight="369.0" prefWidth="303.0" />
    </children>
    <padding>
        <Insets top="5.0" />
    </padding>
</VBox>

I want to add a canvas to the pane with fx:id=canvasPane . In my controller I do it like this

public class CanvasDrawingController implements Initializable {
    @FXML
    private Pane canvasPane;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        Canvas backgroundLayer = new Canvas(canvasPane.getWidth(), canvasPane.getHeight());
        GraphicsContext gc = backgroundLayer.getGraphicsContext2D();
        gc.setFill(Color.WHITE);
        gc.fillRect(0, 0, backgroundLayer.getWidth(), backgroundLayer.getHeight());
        canvasPane.getChildren().add(backgroundLayer);
    }

    @FXML
    private void handleAddLayer(ActionEvent event) { }
}

But nothing happens - I expected to get the pane with the white canvas, but instead I get the same empty pane.

What's the problem?

Answer 1

canvasPane.getWidth() and canvasPane.getHeight() values are most likely zero. Try:

Canvas backgroundLayer = new Canvas(200, 200); 

or:

Canvas backgroundLayer = new Canvas(canvasPane.getPrefWidth(), canvasPane.getPrefHeight());