Question

我正在使用Krunal Shah / Thirdrocktechkno从这个问题提供的答案：how to free draw using fabric-js，它工作正常（至少我可以切换不同的形状并画在我的画布上）但是我想弄清楚一些事情。

如果有更优选的方式，则在不同的形状（圆/线/箭头/方形）之间切换：

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

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

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

Line.prototype.disable = function（）{ this.isDrawing = false; }

如何删除这些形状作为组选择（我试图创建一个getSelection函数并搜索了问题，搜索并检查了wiki，但我只是不理解它或遗漏了某些东西。声明函数未定义。我可以在使用它时一次删除一个对象：

$（“＃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方法删除附加事件。您正在向画布注册事件，但在选择/自由绘制时不会将其删除，这就是它绘制工具的原因。查看更新的jsFiddle

如何使用fabric.js画布切换/选择/删除自定义形状

1 个答案: