切换函数 JavaScript

Question

问题

当我尝试克隆它时，我通过名为 FabricJS 的 API 添加的画布图像不断被删除。我正在克隆它，因为我想删除 canvas 元素中的所有事件侦听器。

我想要什么

我想要的基本上是能够打开/关闭我现在无法执行的直线功能，这正是我尝试克隆它的原因，以便我可以删除所有事件侦听器。如果你们对如何在不克隆的情况下做到这一点有任何想法。我只有绘图功能，但我根本无法切换它。

守则

var canvas = new fabric.Canvas('c', { selection: false });
    var imgElement = document.getElementById('base');
    var imgInstance = new fabric.Image(imgElement, { selectable: false});
    var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100});
    canvas.add(imgInstance, circle);
    var line, isDown;
    function cLine(run){
        if (run == false) {
            document.getElementById('c').removeEventListener('mousedown');
            document.getElementById('c').removeEventListener('mousemove');
            document.getElementById('c').removeEventListener('mouseup');
            return;
        } else {
        canvas.on('mouse:down', function(o){
        isDown = true;
        var pointer = canvas.getPointer(o.e);
        var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
        line = new fabric.Line(points, {
            strokeWidth: 2,
            fill: 'red',
            stroke: 'red',
            originX: 'center',
            originY: 'center'
        });
            canvas.add(line);
        });

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

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

        function save() {
            if (!fabric.Canvas.supports('toDataURL')) {
                alert('Sorry, your browser is not supported.');
            } else {
            canvas.deactivateAll();
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.bringToFront(o);
                }
            });
            window.open(canvas.toDataURL('png'), "");
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.sendToBack(o);
                }
            });
            canvas.renderAll();
        }}

我在用什么

我实际上正在为此使用 FabricJS。

Answer 1

无需移除事件处理程序，处理即可

var allowedToDraw = true; // the default value

function toggleDrawingLine(){
    allowedToDraw = !allowedToDraw;
}

画线的时候

canvas.on('mouse:move', function(o){
    if (!isDown || !allowedToDraw){
        return;
    }
...