时间戳

首页 > 解决方案 > 堆在 JavaFX FXML 文档中

java - 堆在 JavaFX FXML 文档中

问题描述

我正在使用 FXML 在 JavaFX 中创建一个图像处理程序来组织 UI。它目前支持加载图像、绘图和保存这些更改。

我不知道如何/找不到在 FXML 文档中表示“画布堆栈”的方法。我的目标是拥有一堆 Canvas'，它允许我通过简单地清除堆栈中的顶层来撤消用户所做的更改 canvas'。这个想法是每个编辑都将驻留在它自己的画布上。

下面是 FXML 文档中的一些代码。这是我的边框窗格的中心窗格。这是图像处理程序的中心。在其中我有一个堆栈窗格，以便我可以覆盖东西。这两条评论是我希望能够做到的，但这些尝试不起作用。

<!-- center pane -->
<center>
    <StackPane>
        <Canvas fx:id="currCanvas" />
        <!-- <Canvas fx:id="canvasStack" /> -->
        <!-- <Stack fx:id="canvasStack" /> -->
        <Canvas fx:id="previewCanvas" />
   </StackPane>
</center>

如果我要在没有 FXML 文档的情况下实现它，它会简单得多，但组织 UI 会更加困难。我的困惑是我不知道如何使用 FXML 来完成这项工作。

谢谢

标签： javacanvasjavafxstackfxml

解决方案

只需使用Pane. 这样就没有对齐孩子的问题。Panes 不提供 a Stackof children，但 aList也可以用于堆栈操作，虽然从列表中删除最后一项比堆栈要困难一些，但足够简单。

以下代码只是简单地添加了圆形和矩形，但您可以用添加Canvases 来替换它：

@Override
public void start(Stage primaryStage) {
    Button doBtn = new Button("draw");
    Button undo = new Button("undo");
    undo.setDisable(true);

    Pane stack = new Pane();
    stack.setPrefSize(400, 400);

    VBox root = new VBox(new HBox(doBtn, undo), stack);

    doBtn.setOnAction(new EventHandler<ActionEvent>() {

        private int count = 0;

        @Override
        public void handle(ActionEvent event) {
            // create & add some node
            Node addedNode;
            switch (count % 2) {
                case 0:
                    addedNode = new Circle(count * 5 + 5, count * 5 + 5, 5, Color.BLUE);
                    break;
                case 1:
                    Rectangle rect = new Rectangle(count * 5, 390 - count * 5, 10, 10);
                    rect.setFill(Color.RED);
                    addedNode = rect;
                    break;
                default:
                    return;
            }
            stack.getChildren().add(addedNode);
            undo.setDisable(false);
            count++;
        }

    });

    undo.setOnAction(evt -> {
        // remove last child
        List<Node> children = stack.getChildren();
        children.remove(children.size() - 1);

        // check, if undo button needs to be disabled
        undo.setDisable(children.isEmpty());
    });

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

请注意，我不建议Canvas为每个操作创建新的 es，因为这可能会很快导致内存问题......

推荐阅读