重置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()重新加载场景时清除此画布，问题就消失了。

您可以查看文档。