如何保存KineticJS的状态并将其恢复

Question

保存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); 

每次点击一个点正使用Cirlce形状adeed在舞台上绘制backgrounLayer

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

pointsAdded是迄今为止添加到我的backgroundLayer上的所有点的列表阶段。我的问题是如何或者什么是最好的方式来保存所有孩子和回调函数的当前状态并恢复它。我想在用户使用下拉菜单时能够在不同状态之间切换。

Answer 1

您可以使用toJSON()方法来实现此目的。这里有一个tutorial，其中您将Kinetic阶段的内容保存为JSON。

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