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

【问题标题】：How to create a straight line in Fabric.Js如何在 Fabric.Js 中创建一条直线
【发布时间】：2020-07-23 14:52:07
【问题描述】：

我正在尝试在 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??
}

【问题讨论】：

标签： javascript html fabricjs

【解决方案1】：

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

另见the Fabric.js docs。

你可以试试这样的：

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;
}

【讨论】：