重置canvas并使用Fabric.js中的JSON重新加载

Question

我正在构建类似于kitchennsink示例的内容，除非我需要能够拥有多个视图。

http://fabricjs.com/kitchensink

名片： 正面和背面

编辑时我会定期保存JSON。

如果你想在不重新加载页面的情况下编辑后面（因为我使用的是AngularJS），如何擦除当前画布并重新加载新的JSON？

我正在加载JSON，你点击更改视图，我运行canvas.clearContext()，然后重新加载新的JSON。这不符合我的预期。

更新

我正在使用指令来管理这个画布。当JSON可用时，我正在使指令实例化，当我尝试更新它时，无论出于何种原因，它都不起作用。

我删除了它并使指令启动为空，现在我只是通过服务loadJson。耶！

Answer 1

通常canvas.loadFromJSON()在加载新对象之前清除整个画布。否则，您可以运行canvas.clear();。

http://fabricjs.com/docs/fabric.Canvas.html#clear

如何加载JSON？

这样的事情应该有效：

var json = canvas.toJSON();

canvas.clear();

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

加载JSON后，调用canvas.renderAll()非常重要。在canvas.loadFromJSON(json, callback)的第二个参数中，您可以定义一个cllback函数，该函数在加载/添加所有对象后调用。

http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON

Answer 2

在使用React运行时，使用canvas.clear()还存在类似的问题，这还远远不够-理论上删除了这些对象，但场景中仍然存在某些东西，与新加载的对象弄混了，这可能是因为那些附加到已删除对象上的事件...无论如何，现在我正在使用canvas.dispose()在重新加载场景时清除此画布，问题已经解决了。

您可以check the docs。