Javascript Fabric.js中断功能不起作用

我正在使用fabric js创建圆圈和箭头。如果我点击单选箭头按钮，我可以用鼠标画一个箭头，圆圈按钮也是如此

圆圈按钮工作正常，但如果我改为箭头按钮，它会给我画一个圆圈+箭头，我不明白为什么会发生这种情况

我的Html代码：

    <label class="btn btn-default btn-lg">
        <input type="radio" name="drawing-shape" id="drawing-arrow-shape">
        <i class="glyphicon glyphicon-arrow-right"></i>
    </label>
    <label class="btn btn-default btn-lg">
        <input type="radio" name="drawing-shape" id="drawing-circle-shape">
        <i class="glyphicon glyphicon-record"></i>
    </label>      

var canvas=newfabric.canvas（'canvas'）；
canvas.selection=false；
canvas.perPixelTargetFind=true；
var isDown，圆圈=空；
函数更改选择（）{
canvas.selection！=canvas.selection；
changeSelectionObj（真）；
取消注册事件（）；
}
函数unRegisterEvent（）{
canvas.off（'mouse:down'，onCircleMouseDown）；
canvas.off（'mouse:move'，onCircleMouseMove）；
canvas.off（'mouse:up'，onCircleMouseUp）；
canvas.off（'mouse:down'，onArrowMouseDown）；
canvas.off（'mouse:move'，onArrowMouseMove）；
canvas.off（'mouse:up'，onArrowMouseUp）；
}
功能更改选择bj（val）{
canvas.forEachObject(
功能（obj）{
obj['selective']=val；
obj.setCoords（）；
});
canvas.renderAll（）；
}
函数drawArrow（）{
canvas.off（'mouse:down'，onCircleMouseDown）；
canvas.off（'mouse:move'，onCircleMouseMove）；
canvas.off（'mouse:up'，onCircleMouseUp）；
canvas.on（'mouse:down'，onArrowMouseDown）；
canvas.on（'mouse:move'，onArrowMouseMove）；
canvas.on（'mouse:up'，onArrowMouseUp）；
changeSelectionObj（假）；
}
函数drawCircle（）{
on（'mouse:down'，onCircleMouseDown）；
on（'mouse:move'，onCircleMouseMove）；
canvas.on（'mouse:up'，onCircleMouseUp）；
canvas.off（'mouse:down'，onArrowMouseDown）；
canvas.off（'mouse:move'，onArrowMouseMove）；
canvas.off（'mouse:up'，onArrowMouseUp）；
changeSelectionObj（假）；
}
函数onArrowMouseDown（o）{
var pointer=canvas.getPointer（o.e）；
startX=指针.x；
startY=pointer.y；
}
函数onArrowMouseUp（o）{
var pointer=canvas.getPointer（o.e）；
endX=指针.x；
endY=pointer.y；
显示箭头（startX、startY、endX、endY）；
}
RorrowMouseMove（e）上的函数{
}
函数onCircleMouseDown（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
origX=指针.x；
origY=pointer.y；
如果（！圈）{
圆形=新织物。圆形({
左：origX，
上图：奥里基，
原文：“中心”，
原文：'中心'，
半径：0，
填写：''，
笔划：“红色”，
冲程宽度：3，
可选：false
});
canvas.add（圆圈）；
}
}
函数onCircleMouseMove（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
圆集({
半径：Math.sqrt（Math.pow（（origX-pointer.x），2）+Math.pow（（origY-pointer.y），2））
});
canvas.renderAll（）；
}
函数onCircleMouseUp（o）{
isDown=假；
圆圈=空；
}
功能显示箭头（fromx、fromy、tox、toy）{
变量角度=数学atan2（玩具-fromy，tox-fromx）；
var headlen=15；//箭头大小
//将线端向后移动一些以说明箭头。
tox=tox-（头条）*数学cos（角度）；
玩具=玩具-（头饰）*数学sin（角度）；
//计算积分。
变量点=[{
x:fromx，//起点
y:弗洛米
}, {
x:fromx-（标题/4）*数学cos（角度-Math.PI/2），
y:fromy-（标题/4）*数学sin（角度-Math.PI/2）
}, {
x:tox-（headlen/4）*数学cos（angle-Math.PI/2），
y:玩具-（头条/4）*数学sin（角度-Math.PI/2）
}, {
x:tox-（标题）*数学cos（角度-数学PI/2），
y:玩具-（头条）*数学sin（角度-数学PI/2）
}, {
x:tox+（标题）*数学cos（角度），//提示
y:玩具+（头条）*数学正弦（角度）
}, {
x:tox-（头条）*数学cos（角度+数学PI/2），
y:玩具-（头条）*数学sin（角度+数学PI/2）
}, {
x:tox-（headlen/4）*数学cos（角度+数学PI/2），
y:玩具-（头条/4）*数学sin（角度+数学PI/2）
}, {
x:fromx-（标题/4）*数学cos（角度+数学PI/2），
y:fromy-（标题/4）*数学sin（角度+数学PI/2）
}, {
x:fromx，
y:弗洛米
}];
变量pline=新结构。多段线（点{
填充：“黑色”，
笔画：“黑色”，
不透明度：1，
冲程宽度：2，
原文：“左”，
原创：“top”，
可选：false
});
canvas.add（pline）；
canvas.renderAll（）；
}

画布{
边框：2个点绿色；
}

挑选
箭头键
画圆圈

it因为您要将其添加到画布中的事件，所以要正确地管理它work@Durage我不太明白，请您进一步解释一下或解释一下您的意思好吗？

canvas.on（'mouse:down'，function）

这将在您按下鼠标时一直听，而不仅仅是圆形或箭头，如果您定义了，那它就会一直在那里。所以要取消注册事件，您需要调用canvas.off（'mouse:down'，function）

    drawingCircle.change = function() {
        canvas.isCircleMode  = true;
        canvas.isArrowMode   = false;
        canvas.isDrawingMode = false;
        if (canvas.isCircleMode) {
            currentShapeName.innerHTML = 'Circle';
            drawCircle(true);
            drawArrow(false);
        }
    };

    drawingArrow.change = function() {
        canvas.isArrowMode = true;
        canvas.isCircleMode = false;
        canvas.isDrawingMode = false;
        if (canvas.isArrowMode) {
            currentShapeName.innerHTML = 'Arrow';
            state = true;
            drawCircle(false);
            drawArrow(state, 100, 100, 150, 150);
            if(state) {
                var startX, startY, endX, endY;
                canvas.on('mouse:down', function() {
                    var pointer = canvas.getPointer(event.e);
                    startX = pointer.x;
                    startY = pointer.y;
                });
                canvas.on('mouse:up', function() {
                    var pointer = canvas.getPointer(event.e);
                    endX = pointer.x;
                    endY = pointer.y;
                    drawArrow(true, startX, startY, endX, endY);
                });
            } else {
                return;
            }
        }
    };

    function drawCircle(go) {
        var circle, isDown, origX, origY;
        if (go == false) {
            console.log("circle false!!");
            isDown = false;
            return;
        }
        if($('#drawing-circle-shape').is(':checked')) {
            console.log("circle checked");
            canvas.on('mouse:down', function(o) {
                isDown = true;
                var pointer = canvas.getPointer(o.e);
                origX = pointer.x;
                origY = pointer.y;
                circle = new fabric.Circle({
                    left: origX,
                    top: origY,
                    originX: 'left',
                    originY: 'top',
                    radius: pointer.x - origX,
                    angle: 0,
                    fill: '',
                    stroke: 'red',
                    strokeWidth: 3,
                });
                canvas.add(circle);
            });
            canvas.on('mouse:move', function(o) {
                if (!isDown) return;
                var pointer = canvas.getPointer(o.e);
                var radius = Math.max(Math.abs(origY - pointer.y), Math.abs(origX - pointer.x)) / 2;
                if (radius > circle.strokeWidth) {
                    radius -= circle.strokeWidth / 2;
                }
                circle.set({
                    radius: radius
                });
                if (origX > pointer.x) {
                    circle.set({
                        originX: 'right'
                    });
                } else {
                    circle.set({
                        originX: 'left'
                    });
                }
                if (origY > pointer.y) {
                    circle.set({
                        originY: 'bottom'
                    });
                } else {
                    circle.set({
                        originY: 'top'
                    });
                }
                canvas.renderAll();
            });
            canvas.on('mouse:up', function(o) {
                isDown = false;
            });
        } else {
            return;
        }
    }

    function drawArrow(go, fromx, fromy, tox, toy) {
        if (go == false) {
            console.log("arrow false");
            return;
        }
        if($('#drawing-arrow-shape').is(':checked')) {
            var angle = Math.atan2(toy - fromy, tox - fromx);
            var headlen = 15; // arrow head size
            // bring the line end back some to account for arrow head.
            tox = tox - (headlen) * Math.cos(angle);
            toy = toy - (headlen) * Math.sin(angle);
            // calculate the points.
            var points = [{
                x: fromx, // start point
                y: fromy
            }, {
                x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2),
                y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
            }, {
                x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2),
                y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
            }, {
                x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
                y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
            }, {
                x: tox + (headlen) * Math.cos(angle), // tip
                y: toy + (headlen) * Math.sin(angle)
            }, {
                x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
                y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
            }, {
                x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
                y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
            }, {
                x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
                y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
            }, {
                x: fromx,
                y: fromy
            }];

            var pline = new fabric.Polyline(points, {
                fill: 'black',
                stroke: 'black',
                opacity: 1,
                strokeWidth: 2,
                originX: 'left',
                originY: 'top',
                selectable: true
            });
            canvas.add(pline);
            canvas.renderAll();
        } else {
            return;
        }