切换函数 JavaScript

Question

问题

我的 canvas 图片是通过名为 FabricJS 的 API 添加的，当我尝试克隆它时，它一直被删除。我克隆它是因为我想删除 canvas 元素中的所有事件侦听器。

我想要什么

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

代码

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

切换函数 JavaScript

Toggle A Function JavaScript

javascript

jquery

fabricjs