如何在 Fabric.Js 中创建一条直线

Question

我正在尝试在 fabric.js 中创建一条直线，该直线将使用输入复选框切换到线条模式。 问题是，即使我取消选中它，直线也不会停止。 取消选中后如何让它停止输出一条线？

HTML

<input type="checkbox" id="drawmode">
<canvas id="c" width="500" height="300"></canvas>

JavaScript

    var canvas = new fabric.Canvas('c', { selection: false });
        var line;
        var isDrawing;

document.getElementById('drawmode').addEventListener("click", function(){
        if(this.checked == true){

canvas.on('mouse:down', function (o) {
            isDrawing = true;
            var pointer = canvas.getPointer(o.e);
            var points = [pointer.x, pointer.y, pointer.x, pointer.y];

            line = new fabric.Line(points, {
                strokeWidth: 3,
                stroke: 'black'
            });
            canvas.add(line);
        });


        canvas.on('mouse:move', function (o) {
            if (isDrawing) {
                var pointer = canvas.getPointer(o.e);
                line.set({ x2: pointer.x, y2: pointer.y });
                canvas.renderAll();
            }
        });

        canvas.on('mouse:up', function (o) {
            isDrawing = false;
        });
} 

else if(this.checked == false)
{
  // What should I put here to break out of the line drawing mode??
}

Answer 1

使用canvas.off()关闭一切，或canvas.off('mouse:down')关闭某个事件的所有处理程序，或canvas.off('mouse:down', handler)关闭某个处理程序处理程序。 在最后一种情况下，您必须将处理程序放入变量中。

另请参阅Fabric.js 文档。

你可以尝试这样的事情：

document.getElementById('drawmode').addEventListener("click", function(){
    if(this.checked) {
        canvas.on('mouse:down', handleMouseDown);
        canvas.on('mouse:move', handleMouseMove);
        canvas.on('mouse:up', handleMouseUp);
    }  else {
        canvas.off('mouse:down', handleMouseDown);
        canvas.off('mouse:move', handleMouseMove);
        canvas.off('mouse:up', handleMouseUp);
    }
}

function handleMouseDown(o) {
    isDrawing = true;
    var pointer = canvas.getPointer(o.e);
    var points = [pointer.x, pointer.y, pointer.x, pointer.y];

    line = new fabric.Line(points, {
        strokeWidth: 3,
        stroke: 'black'
    });
    canvas.add(line);
}

function handleMouseMove(o) {
    if (isDrawing) {
        var pointer = canvas.getPointer(o.e);
        line.set({ x2: pointer.x, y2: pointer.y });
        canvas.renderAll();
    }
}

function handleMouseUp (o) {
    isDrawing = false;
}