Fabric.js - 我有一个错误：未捕获的类型错误：无法读取未定义的属性

Question

我无法弄清我在代码中的错误。因此，这种面料正在画线。然后，当我双击行时，我希望控制红色“控制点”出现在行的每一端，因此我可以单击并根据需要单击并调整该行（该代码尚未包含）。

这是代码。

我遇到了这个错误。它发生在函数updateNewlinecoordinate的第101行中，其中说：if（obj.id ==='添加键'）{

und offfict typeError：无法在i.updatenewlinecoordinates上读取未定义（读取'id'）的属性（读取'id'）

    let canvas = new fabric.Canvas("canvas", {
    width: window.innerWidth, 
    height: window.innerHeight
});
    
let addingLineBtn = document.getElementById('adding-line-btn'); 
let addingLineBtnClicked = false;

addingLineBtn.addEventListener('click', activateAddingLine); 

function activateAddingLine() {
    if(addingLineBtnClicked===false) { 
        addingLineBtnClicked = true;
        canvas.on('mouse:down', startAddingLine); 
        canvas.on('mouse:move', startDrawingLine);
        canvas.on('mouse:up', stopDrawingLine);

        canvas.selection = false;  
        canvas.hoverCursor = 'auto';  
    
        objectSelectability('added-line', false);
    }    
}

let line; 
let mouseDown = false; 

function startAddingLine(o) {
    mouseDown = true;
    let pointer = canvas.getPointer(o.e);
    
    line = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
            id: 'added-line',
            stroke: 'black',
            strokeWidth: 3,
            selectable: false   
        });  
        
        canvas.add(line); 
        canvas.requestRenderAll(); 
}

function startDrawingLine(o) {
    if(mouseDown===true) {
        let pointer = canvas.getPointer(o.e); 

        line.set({
            x2: pointer.x,
            y2: pointer.y
        });

        canvas.requestRenderAll(); 
    }
}

function stopDrawingLine() {
    line.setCoords();  
    mouseDown = false; 
}

let deactivateAddingShapeBtn = document.getElementById('deactivate-adding-shape-btn');

deactivateAddingShapeBtn.addEventListener('click', deactivateAddingShape)

function deactivateAddingShape(){
    canvas.off('mouse:down', startAddingLine); 
    canvas.off('mouse:move', startDrawingLine);
    canvas.off('mouse:up', stopDrawingLine);

    objectSelectability('added-line', true);

    canvas.hoverCursor = 'all-scroll';  
    addingLineBtnClicked = false;  
}

function objectSelectability(id,value) {
    canvas.getObjects().forEach(o => {  
        if(o.id===id) {                 
            o.set({                     
            })
        }
    });
}

canvas.on({  // this is so that when you move the line, the dblclick circles on the ends move with it.
    'object:moved': updateNewLineCoordinates,
    'selection:created': updateNewLineCoordinates,
    'selection:updated': updateNewLineCoordinates,
    'mouse:dblclick': addingControlPoints
});

let newLineCoords = {};

function updateNewLineCoordinates(o) {  
    newLineCoords = {};
    
    let obj = o.target;

    if(obj.id==='added-line') {
        let centerX = obj.getCenterPoint().x; 
        let centerY = obj.getCenterPoint().y; 

        let x1offset = obj.calcLinePoints().x1;  
        let y1offset = obj.calcLinePoints().y1;
        let x2offset = obj.calcLinePoints().x2;
        let y2offset = obj.calcLinePoints().y2;

        newLineCoords = {  
            x1: centerX+x1offset,
            y1: centerY+y1offset,
            x2: centerX+x2offset,
            y2: centerY+y2offset
        }
    }
}

function addingControlPoints(o) {
    let obj = o.target;

    if(!obj) {  
        return;
    }
    else {
        if(obj.id==='added-line') {  
            let pointer1 = new fabric.Circle({  
                radius: obj.strokeWidth*3,
                fill: 'red', 
                opacity: 0.5,
                top: newLineCoords.y1,
                left: newLineCoords.x1,
                originX: 'center',  
                originY: 'center'
            });
        
            let pointer2 = new fabric.Circle({  
                radius: obj.strokeWidth*3,
                fill: 'red', 
                opacity: 0.5,
                top: obj.y2,
                left: obj.x2,
                originX: 'center',  
                originY: 'center'
            });
        
            canvas.add(pointer1,pointer2);
            canvas.requestRenderAll();
        }
    }
}