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

切换函数JavaScript

1 个答案: