如何保存 KineticJS 的状态并恢复它答案

【问题标题】：How to save the state of a KineticJS and restore it如何保存 KineticJS 的状态并恢复它
【发布时间】：2014-09-23 18:22:59
【问题描述】：

保存具有所有图层、形状和事件函数回调的 KineticJs 的最佳方法是什么。

我有以下

var stage; //KinetiJS stage
var backgroundLayer //KineticJS Layer
var backgroundImage //KineticJS Image
var extraGroup; //A group to hold some extra shapes
var lineGroup; // A group to hold some KineticJS lines

我还在舞台上捕捉到 contentclick 事件

stage.on("contentClick", setContentClick);

每次点击都会在舞台上绘制一个点，使用背景图层上的圆环形状

var point = Kinetic.Circle(...);
//some code here
point.on('mouseenter', function()...)
point.on("mouseleave", function()...);
point.on("dragend", function()...);
pointsAdded.append(point);

pointsAdded 是目前在我的 backgroundLayer 上添加的所有点的列表，该点已添加到舞台上。我的问题是如何或什么是我保存舞台当前状态及其所有子级和回调函数并恢复它的最佳方式。当用户使用下拉菜单时，我希望能够在不同的状态之间进行切换。

【问题讨论】：

标签： javascript kineticjs

【解决方案1】：

您可以使用toJSON() 方法来实现这一点。这是tutorial，您可以在其中将 Kinetic 阶段的内容保存为 JSON。

重要提示：但是您应该注意到事件、函数回调和图像 url 是不可序列化的。换句话说，您必须在从 JSON 加载回动力学阶段后再次重新分配所有事件、回调等，以便完全恢复之前的状态。

【讨论】：