如何禁用选择freedrawing Fabricjs

Question

在 FabricJs 中使用 FreeDrawing 绘制某些内容后，您可以选择绘制的内容并移动它。有没有办法禁用此选择？

Answer 1

如果您不需要在画布上进行任何交互，您可以使用 StaticCanvas

var canvas = this.__canvas = new fabric.StaticCanvas('c');

或者，如果您只想禁用特定对象（即最后一个画笔描边）的选择，您可以尝试在每次创建描边时调用以下代码：

canvas.item(0).selectable = false;
canvas.renderAll();

---

如果您需要与其他对象交互，您也可以在画布初始化后立即定义它

fabric.Object.prototype.selectable = false;

所有新对象都将是不可选择的，除非您在要创建可选择对象时另外指定

var text = new fabric.Text('Honey,\nI\'m subtle', {
    fontSize: 250,
    left: 50,
    top: 0,
    selectable: true // make this object selectable
});
canvas.add(text);

Answer 2

如果需要某些对象但不是全部对象具有交互性，您可以在创建非交互对象时设置：

evented: false

。

http://fabricjs.com/docs/fabric.Rect.html#evented

Answer 3

也可以禁用可选的角/边框和/或控件。这是完整的代码：

var canvas = this.__canvas = new fabric.Canvas('c');    
fabric.Object.prototype.transparentCorners = false;
canvas.selection = false;
fabric.Image.fromURL(src, function (img) {

    const height = img.getBoundingRectHeight();
    const width = img.getBoundingRectWidth();
          
    const oImg = img.set({ 
        hasControls: false, 
        hasBorders: false, 
        selectable: false 
    }).scale(factor);

    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);
}, { 
    crossOrigin: 'anonymous' 
});