如何将 fabric js 设置为仅查看？

Question

我试图在 Fabric.js 中显示以前保存的绘图，然后将其变成仅视图，无编辑模式。这是我拥有的：

canvas1.loadFromJSON(cavasData, canvas1.renderAll.bind(canvas1));
canvas1.isDrawingMode = false;
canvas1.deactivateAll();
canvas1.selection = false;

但它并非不可触及。显示正常，但对象仍然 select-able 和 change-able.

Answer 1

从 json 加载时，您应该禁用对象选择，

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
    object.set('selectable', false);
});

Answer 2

最简单和最稳定的方法是在父元素 HTML 上设置 pointer-events css 属性元素：

.locked {
    pointer-events: none;
}

要从 javascript 设置此属性：

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

解锁canvas:

canvasElement.classList.remove("locked")

how to set fabric js to view only?