Fabric.js多边形创建：双击删顶点圆报‘对象未定义’错求助

看起来你遇到的核心问题是顶点圆形的引用没有被正确追踪，导致双击完成多边形创建后，尝试删除时找不到对应的对象。结合Fabric.js的工作逻辑，我给你几个具体的修复步骤：

1. 定义全局（函数内）数组存储顶点圆 #

在你的drawPoligon函数内部，和mode、currentShape一起定义一个数组，用来保存所有添加的顶点圆形对象——这是后续能找到并删除它们的关键：

function drawPoligon(id) {
    var mode = "add", currentShape;
    var vertexCircles = []; // 新增：专门存储顶点圆的数组
    // ... 其他变量定义

2. 添加顶点时把圆形存入数组 #

每次创建顶点圆并添加到画布后，一定要把这个圆对象push到vertexCircles里，确保后续删除时有明确的引用：

// 假设你是在点击画布时添加顶点，示例逻辑如下
canvas.on('mouse:down', function(opt) {
    if (mode === 'add') {
        var pointer = canvas.getPointer(opt.e);
        // 创建顶点圆
        var circle = new fabric.Circle({
            radius: 6,
            fill: '#ff0000',
            left: pointer.x,
            top: pointer.y,
            selectable: false // 建议设为不可选，避免干扰多边形操作
        });
        canvas.add(circle);
        vertexCircles.push(circle); // 关键：把圆存入数组
        
        // 同步更新多边形路径
        if (!currentShape) {
            currentShape = new fabric.Polygon([pointer], {
                fill: 'rgba(0,0,0,0)',
                stroke: '#000',
                strokeWidth: 2
            });
        } else {
            currentShape.points.push(pointer);
            canvas.renderAll();
        }
    }
});

3. 双击事件中遍历数组删除所有顶点圆 #

在双击完成多边形的逻辑里，遍历vertexCircles数组，逐个从画布移除，然后清空数组避免后续重复操作：

canvas.on('dblclick', function() {
    if (mode === 'add' && currentShape && currentShape.points.length > 2) {
        // 闭合并添加多边形到画布
        currentShape.closePath();
        canvas.add(currentShape);
        
        // 删除所有顶点圆
        vertexCircles.forEach(function(circle) {
            // 可选：先校验对象是否存在于画布中，避免报错
            if (circle && canvas.contains(circle)) {
                canvas.remove(circle);
            }
        });
        vertexCircles = []; // 清空数组
        
        // 切换模式，结束多边形创建流程
        mode = 'done';
        currentShape = null;
    }
});

4. 排查常见坑点 #

• 作用域问题：如果vertexCircles是在某个子函数内部定义的，双击事件的回调会访问不到它，一定要确保它的作用域和mode、currentShape一致。
• 引用丢失：如果添加顶点时没有把圆对象存入数组，而是直接创建后就丢了引用，删除时自然找不到对象。
• 对象有效性：删除前用canvas.contains(circle)确认对象确实在画布上，避免尝试删除已经被移除的对象。

按照这个逻辑调整后，双击完成多边形时应该能顺利删除所有顶点圆，不会再出现“待删除对象未定义”的错误了。

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