JavaFX VectorCanvas嵌套内部Pane时添加的线条元素不显示问题

你遇到的渲染异常完全是两个不符合JavaFX设计规范的操作导致的，刚好和你描述的「元素存在可点击、但不可见」现象完全匹配：

• 你重写了VectorCanvas的getChildren()和getChildrenUnmodifiable()方法，破坏了JavaFX布局渲染系统的核心契约。所有继承自Parent的容器（包括你用的Pane），内部的布局计算、子节点渲染、CSS处理、事件遍历逻辑，全部依赖getChildren()返回容器自身真实持有的子节点列表。你把这个方法的返回值偷换成了内部VectorCanvasContent的子节点列表，导致VectorCanvas完全感知不到你通过super.getChildren().add(content)添加的content面板，永远不会对这个content节点执行布局、尺寸计算。
• VectorCanvasContent作为普通Pane子类，本身不会自动拉伸填充父容器，初始默认宽高为0。由于它从来没被父容器布局，你也没有手动设置或绑定它的尺寸，它的实际渲染尺寸始终是00。JavaFX的渲染逻辑会直接跳过尺寸为0的Region（Pane的父类）*的子节点绘制流程，但鼠标拾取是基于全局场景坐标遍历的，不受父节点0尺寸影响——这就是为什么你点对应位置能触发监听器，但看不到线条。

你直接把线条加到VectorCanvas本身时能正常显示，是因为这些线条直接被VectorCanvas识别为自身子节点，会被正常布局渲染，不会触发上面的问题。

不要重写getChildren()系列方法，把VectorCanvasContent作为正常子节点添加到VectorCanvas中，手动绑定content的尺寸让它始终铺满画布。后续要实现平移、缩放功能，直接修改content的translateX/translateY、scaleX/scaleY属性或者添加自定义Transform即可，不会改变内部图形的相对坐标，点击事件可以正常响应，完全匹配你最初的设计思路。

修正后的核心代码如下：

import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;

import java.util.function.Consumer;

public class VectorCanvas extends Pane {

    public static class VectorCanvasContent extends Pane {}

    public static final Consumer<VectorCanvas> DEFAULT_DRAWER = canvas -> {
        // 监听画布尺寸变化自动重绘，避免初始化时宽高为0、窗口拉伸后图形不更新的问题
        canvas.widthProperty().addListener(obs -> canvas.redraw());
        canvas.heightProperty().addListener(obs -> canvas.redraw());
        
        Line[] lines = {
                new Line(0, 0, canvas.getWidth(), 0),
                new Line(canvas.getWidth(), 0, canvas.getWidth(), canvas.getHeight()),
                new Line(canvas.getWidth(), canvas.getHeight(), 0, canvas.getHeight()),
                new Line(0, canvas.getHeight(), 0, 0),
                new Line(0, 0, canvas.getWidth(), canvas.getHeight()),
                new Line(0, canvas.getHeight(), canvas.getWidth(), 0)
        };
        for (Line line : lines) {
            line.setStrokeWidth(30);
            line.setStroke(Color.RED);
            line.setFill(Color.RED);
            line.setOnMouseClicked(mouseEvent -> System.out.println("!!!"));
        }
        canvas.drawAll(lines);
    };

    private final Consumer<VectorCanvas> drawer;
    public final VectorCanvasContent content = new VectorCanvasContent();

    public VectorCanvas() {
        this(DEFAULT_DRAWER);
    }

    public VectorCanvas(Consumer<VectorCanvas> drawer) {
        this.drawer = drawer;
        // 正常添加content作为子节点，绑定尺寸让它始终铺满画布
        getChildren().add(content);
        content.prefWidthProperty().bind(widthProperty());
        content.prefHeightProperty().bind(heightProperty());
        // 等画布挂载到场景、尺寸就绪后再执行首次绘制
        sceneProperty().addListener((obs, oldScene, newScene) -> {
            if (newScene != null) draw();
        });
    }

    public void clear() {
        content.getChildren().clear();
    }

    public void draw() {
        if (drawer != null)
            drawer.accept(this);
    }

    public void redraw() {
        clear();
        draw();
    }

    public void draw(Shape shape) {
        content.getChildren().add(shape);
    }

    public void drawAll(Shape... shapes) {
        content.getChildren().addAll(shapes);
    }
}

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