如何在Fabric.js中停用所有对象

Question

如何在保存图像之前在Fabric.js中停用所有对象？

function rasterize() {
  if (!myscript.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
  }
  else {
    /*i want to deactivate all object here*/
    window.open(canvas.toDataURL('png'));
  }
}

- MP.

Answer 1

canvas.deactivateAll(); => 不会触发任何事件 http://fabricjs.com/docs/fabric.Canvas.html#deactivateAll

或者

canvas.deactivateAllWithDispatch(); => 如果有activeObject，那么将触发'before:selection:cleared'和'selection:cleared'两个事件。 http://fabricjs.com/docs/fabric.Canvas.html#deactivateAllWithDispatch

- Kienz

---

@kienz 有没有什么原因需要在“deactivateAll()”之后手动触发“canvas.renderAll()”？我希望它是自动的。 - temuri

Answer 2

我用的方法（fabric 2.7）：

this.canvas.forEachObject(object => {
    object.selectable = false;
    object.evented = false;
});

另一种解决方案是对画布应用一些CSS：pointer-events: none

- Emeric

Answer 3

canvas.deactivateAll();
canvas.renderAll();

只需这两行代码也能达到同样的效果，无需将canvas.selection设置为false。它用于禁用组选择。

- Jitendra Pawar

Answer 4

对我来说这是有效的：

canvas.discardActiveObject();
canvas.requestRenderAll();

- dami7786

---

这似乎是一个答案。也许不太解释性，但不是评论。另一个提到discardActiveObject的答案更像是应该作为评论的内容。 - Gert Arnold

请在您的答案中添加支持细节以改善它。 - Ethan

Answer 5

当我发现这个问题时，我正在寻找：

/* Make sure that touch / click events do nothing */
canvas.deactivateAll();
canvas.selection = false;
canvas.forEachObject(function(o) {
    o.selectable = false;
});

- Martin Thoma