在 Fabric.js 中重置画布并使用 JSON 重新加载

Posted 2023-03-24

【中文标题】在 Fabric.js 中重置画布并使用 JSON 重新加载

【英文标题】：Reset canvas and reload with JSON in Fabric.js

【发布时间】：2014-02-06 07:31:11

【问题描述】：

我正在构建类似于 kitchensink 示例的东西，但我需要能够拥有多个视图。

http://fabricjs.com/kitchensink

名片： 正面和背面

在您编辑时，我会定期保存 JSON。

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

我目前正在加载 JSON，您单击更改视图，我运行 canvas.clearContext()，然后重新加载新的 JSON。这不像我预期的那样工作。

更新

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

我删除了它并使指令初始化为空，现在我只是通过服务加载Json。耶！

【参考方案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) 的第二个参数中，您可以定义一个回调函数，该函数在加载/添加所有对象后调用。

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

【讨论】：

我更改了调用loadFromJSON 的方式，现在它可以完美运行...我将在本周末的某个时候将其添加到github.com/clouddueling/angular-common。如果有兴趣，这是正在进行的代码gist.github.com/clouddueling/8475865

您是否知道如何为该 kitchensink 应用程序创建 angularjs 测试？

【参考方案2】：

我在使用 React 运行时遇到了类似的问题，使用 canvas.clear() 是不够的 - 理论上删除的对象但场景中仍有一些东西，这与新加载的对象混淆，可能是事件附加到那些已移除的对象...无论如何，现在我使用canvas.dispose() 在重新加载场景时清除此画布并且问题消失了。

你可以check the docs。

【讨论】：

嗨，我也在做同样的事情。 canvas.loadFromJSON is not a function错误，我该怎么办？

这里一样，如果你添加了事件，canvas.clear() 不会移除它们，你必须显式调用：canvas.__eventListeners = ;