切換功能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;
    }
...