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

Question

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

score 13 · Accepted Answer

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

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

我不得不添加"evented": false。这是一个例子：

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

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

score 11 · Accepted Answer

您可以使用以下代码使所有元素无法选择

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

score 7 · Accepted Answer

选项中有这样的方法-

selectable: false

      or 

object.set({selectable:false})

      or


 object.selectable = false;

score 0 · Accepted Answer

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

.locked {
    pointer-events: none;
}

要从 javascript 设置此属性：

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

解锁画布：

canvasElement.classList.remove("locked")

score 0 · Accepted Answer

canvas._objects.forEach(obj => {obj.selectable = false;});
canvas.discardActiveObject();

这应该可以解决问题！discardActiveObject应该触发请求重新渲染的事件，因此您不需要手动调用renderAll. 通常，您应该始终使用requestRenderAll而不是renderAll.

5 回答 5