如何使画布中的对象不可选择

How to make objects in canvas unselectable?

本文关键字：可选择 对象 何使画 布中      更新时间：2024-01-08

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

我一直在寻找一个不可移动和无法编辑结构文本，我终于找到了一个将多个SO组合在一起的解决方案，希望能为某人节省一些时间。

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

我不得不添加"evented"：false。这里有一个例子：

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

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

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

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

在选项-中有这样的方法

selectable: false
      or 
object.set({selectable:false})
      or

 object.selectable = false;

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

.locked {
    pointer-events: none;
}

从javascript:设置此属性

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

解锁画布：

canvasElement.classList.remove("locked")

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

这应该奏效！discardActiveObject应该触发请求重新应答器的事件，因此不需要手动调用renderAll。通常，您应该始终使用requestRenderAll而不是renderAll。

相关文章：