JavaFX如何基于4-9的用户输入每次仅显示对应边数的形状

你当前代码的问题是每次点击按钮都直接向根容器root中追加新的形状节点，没有删除上一次生成的旧形状，因此会出现多个形状叠加展示的问题，按照以下方案修改即可实现需求：

• 首先单独定义一个专属容器用于存放图形，避免清空旧形状时误删输入框、按钮等其他交互控件
• 每次触发按钮点击事件后，先清空专属容器内的所有旧节点，再将新生成的形状加入容器

具体修改步骤 #

1. 初始化专属图形容器 #

将以下代码添加到你的界面逻辑中，容器作为类的成员变量定义：

// 放在类内部、方法外部，作为成员变量
private Pane shapeContainer = new Pane();

// 界面初始化阶段，将输入框、提交按钮、图形容器依次加入根节点
// 假设你原本已经把text输入框、button按钮加入root，补充添加图形容器即可
root.getChildren().add(shapeContainer);

2. 修改按钮点击事件逻辑 #

button.setOnAction(e ->  {
    try {
        int num = Integer.parseInt(text.getText());
        // 先清空上一次生成的所有旧形状
        shapeContainer.getChildren().clear();

        if (num ==4) {
            Rectangle rect = new Rectangle();
            rect.setX(200);
            rect.setY(200);
            rect.setWidth(100);
            rect.setHeight(100);
            rect.setStroke(Color.BLACK);
            rect.setFill(num % 2 == 0 ? Color.YELLOW : Color.GREEN);
            shapeContainer.getChildren().add(rect);
        } else if (num == 5) {
            Polygon pentagon = new Polygon();
            pentagon.getPoints().addAll(new Double[] {200.0, 50.0,400.0, 50.0,450.0, 150.0,400.0, 250.0,200.0, 250.0 });
            pentagon.setStroke(Color.BLACK);
            pentagon.setFill(num % 2 == 0 ? Color.YELLOW : Color.GREEN);
            shapeContainer.getChildren().add(pentagon);
        } else if (num == 6) {
            Polygon hexagon = new Polygon();
            hexagon.getPoints().addAll(new Double[] {200.0, 50.0,400.0, 50.0,450.0, 150.0,400.0, 250.0,200.0, 250.0,150.0, 150.0 });
            hexagon.setStroke(Color.BLACK);
            hexagon.setFill(num % 2 == 0 ? Color.YELLOW : Color.GREEN);
            shapeContainer.getChildren().add(hexagon);
        } else if (num == 7) {
            Polygon heptagon = new Polygon();
            heptagon.getPoints().addAll(new Double[] {200.0, 50.0,400.0, 50.0,450.0, 150.0,400.0, 250.0,200.0, 250.0, 250.0,200.0,150.0, 150.0});
            heptagon.setStroke(Color.BLACK);
            heptagon.setFill(num % 2 == 0 ? Color.YELLOW : Color.GREEN);
            shapeContainer.getChildren().add(heptagon);
        } else if (num == 8) {
            Polygon octagon = new Polygon();
            octagon.getPoints().addAll(new Double[] {200.0, 50.0,400.0, 50.0,450.0, 150.0,400.0, 250.0,200.0, 250.0, 250.0,200.0, 150.0, 200.0, 200.0, 250.0});
            octagon.setStroke(Color.BLACK);
            octagon.setFill(num % 2 == 0 ? Color.YELLOW : Color.GREEN);
            shapeContainer.getChildren().add(octagon);
        } else if (num == 9) {
            // 补充九边形坐标逻辑即可支持9条边的图形
            Polygon nonagon = new Polygon();
            // 自行填写九边形的坐标点
            nonagon.setStroke(Color.BLACK);
            nonagon.setFill(Color.GREEN);
            shapeContainer.getChildren().add(nonagon);
        } else {
            Alert error = new Alert(Alert.AlertType.ERROR);
            error.setHeaderText("无效输入");
            error.setContentText("请输入4到9之间的整数");
            error.showAndWait();
        }
    } catch (NumberFormatException error) {
        Alert alert = new Alert(Alert.AlertType.ERROR);
        alert.setHeaderText("无效输入");
        alert.setContentText("请输入合法数字");
        alert.showAndWait();
    }
});

如果你的根节点root没有其他交互控件，也可以直接在添加新形状前调用root.getChildren().clear()清空所有节点，但该方式会把输入框、按钮也一并删除，因此更推荐使用专属容器的方案。

内容的提问来源于stack exchange，提问作者PlumChy