如何保存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加載動態階段之後再次重新分配所有事件，回調等，以便完全恢復之前的狀態。