javascript - 如何使用 fabric.js Canvas 切换/选择/删除自定义形状

Question

我正在使用 Krunal Shah/Thirdrocktechkno 从这个问题中提供的答案:how to free draw using fabric-js ，效果很好(至少我可以切换不同的形状并在我的 Canvas 上绘图)但是我想弄清楚一些事情。

• 在不同的形状(圆/线/箭头/正方形)之间切换，如果有更喜欢的方式，那么这个:

  这是我必须在形状之间切换的东西，但我无法在设置时单独关闭它们，只能切换到不同的形状:

HTML:

<button id="line" class="btn btn-info">Straight Line</button>
<button id="circle" class="btn btn-info">Circle</button>
<button id="squrect" class="btn btn-info">Square/Rectangle</button>
<button id="arrow" class="btn btn-info">Arrow</button>

JS:

// Tried this to disable/untoggle the shape
var lineOn = false;
$("#line").click(function(){
    if(!lineOn){
         lineOn = true;
         canvas.isDrawingMode = false;
         var line = new Line(canvas);
    } else if(lineOn = true){
        lineOn = false;
        $(Line(canvas)).unbind();
    }
});

$("#circle").click(function(){
    canvas.isDrawingMode = false;
    var circle = new Circle(canvas);
});

$("#squrect").click(function(){
    canvas.isDrawingMode = false;
    var squrect = new Rectangle(canvas);
});

$("#arrow").click(function(){
    canvas.isDrawingMode = false;
    var arrow = new Arrow(canvas);
});

• 如何禁用/取消绑定(bind)/关闭形状以停止绘制？
  我确实看到了这个，但不确定如何使用它:

Line.prototype.disable = function() { this.isDrawing = false; }

• 如何将这些形状作为组选择删除(我尝试创建一个 getSelection 函数并搜索了问题，用谷歌搜索并检查了 wiki，但我只是不理解它或遗漏了一些东西。activeGroup 方式声明函数未定义。使用此函数时我可以一次删除一个对象:

$("#delete").click(function(){ canvas.isDrawingMode = false; deleteObjects(); });

function deleteObjects(){
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
        canvas.discardActiveObject();
        canvas.remove(activeObject);
        canvas.remove(Line);
        canvas.remove(Circle);
        canvas.remove(Rectangle);
        canvas.remove(Arrow);
    } else if (canvas.getActiveGroup()) {
        canvas.getActiveGroup().forEachObject(function(a) {
            canvas.remove(a);
        });
        canvas.discardActiveGroup();
    } 
}

但是，因为我似乎无法解开线/圆/等。形状，如果我进入选择模式，如下所示，设置的线/圆形状在单击鼠标时保持绘制形状(即使在自由绘制模式下)，它也会显示选择框，但如果我尝试删除选择它不起作用

$("#select").click(function(){
    canvas.isDrawingMode = false;
    this.isDrawing = false;
    canvas.selection = true;
});

Answer 1

canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');

使用canvas.off删除附加事件的方法。您正在将事件注册到 Canvas ，但不会在选择/自由绘图时将其删除，这就是它绘制工具的原因。检查更新 jsFiddle