如何使画布中的对象无法选择？

Question

我想让画布中的所有对象都不可选。我找到了selectable方法，但我没有找到将它实现到所有对象的方法。

Answer 1

您可以使用以下代码

使所有元素无法选择

canvas.deactivateAll();
canvas.renderAll();
canvas.forEachObject(function(object){ 
       object.selectable = false; 
});

Answer 2

选项中有这样的方法 -

selectable: false

      or 

object.set({selectable:false})

      or


 object.selectable = false;

Answer 3

我一直在寻找不可移动和不可编辑的Fabric Text，最后我找到了一种结合了几种SO的解决方案，希望可以节省一些时间。

在我的情况下，使用“ selectable”：false 是不够的：文本仍然可编辑，并且光标仍然是“可移动光标”（即使无法选择对象）。

我必须添加“事件”：错误。这是一个示例：

this.canvas.add(new fabric.Text("Hello world !", {
            "selectable": false,
            "evented": false
}));

您可以在此处使用不同的控制选项：http://fabricjs.com/controls-customization

Answer 4

在父 HTML 元素上使用 css 属性 pointer-events:

.locked {
    pointer-events: none;
}

要从 javascript 设置此属性：

let canvasElement = document.getElementsByClassName("canvas-container")[0]
canvasElement.classList.add("locked")

解锁画布：

canvasElement.classList.remove("locked")