Kineticjs撤銷/重做與事件處理程序，形狀和圖像

我正在使用Canvas HTML5的設計師繪圖工具的發展中。我將擁有如下功能：添加圖像，添加文本，添加形狀，旋轉，縮放，顏色等...Kineticjs撤銷/重做與事件處理程序，形狀和圖像

我在尋找管理操作歷史記錄（撤消，重做）的好方法，並且找到了一個非常好的方法，你可以在這裏找到它：How to do undo redo

我很高興它會讓我的生活比我想象的更容易，但我錯了。它基於Kinetic.Node.create('json', jsonLayer);。雖然它似乎在乍一看很正常，但也存在一些問題：

它失去參考層之後去除層並創造新的替代
它失去所有的圖像內層
和biggsest問題是它失去了層內的事件處理程序，我有很多

你還有什麼其他的可能性可以推薦給我？我想了解以下信息：

保存的操作在數組和撤消我會做相反他們的編程
序列化和存儲在陣列層的每一個孩子，那麼就撤消我會重建層（看起來太複雜）

來源

2014-02-05 Ervin

是的，動力學保存到JSON將不包括任何事件處理程序或圖像。

的JSON節點被反序列化和再水化後，必須重新連接的處理程序。

有了一些準備，你甚至可以自動完成這個重新佈線。

例如，

首先保存在一個對象或數組所有的事件處理程序：

var eventHandlers={ 
    myClickHandler1:function(e){ alert("Fired myClickHandler1"); }, 
    myClickHandler2:function(e){ alert("Fired myClickHandler2"); }, 
    myMouseMoveHandler1:function(e){ alert("Fired myMouseMoveHandler1"); }, 
    myMouseMoveHandler2:function(e){ alert("Fired mymouseMoveHandler2"); } 
}

二自定義屬性添加到需要一個事件處理程序的每個Kinetic.Node ：

var circle1 = new Kinetic.Circle({ 
    x:100, 
    y:100, 
    radius: 30, 
    fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4, 
    draggable: true, 
    clickEvent:"myClickHandler1" 
});

最後節點已被重新水化後，您可以自動重新連接事件處理程序：

function rewireHandlers(node){ 

    var handler; 

    // rewire click handler 
    handler=node.getAttr("clickEvent"); 
    if(handler && eventHandlers[handler]){ 
     node.on("click",eventHandlers[handler]) 
    } 

    // rewire other event handlers the same way 
} 

// call for rewiring 
rewireHandlers(circle1);

來源

2014-02-05 20:06:34 markE

謝謝。我會試試這個。聽起來不錯。 – Ervin

我有一些更多的問題，也許我會爲那些 – Ervin

新主題這是我的其他問題，我donw知道，如果你是fammiliar它或沒有，我會感謝你的情況下，回答你：HTTP：//計算器.COM /問題/ 21597030/kineticjs-撤消層層 - 不要 - 消失 - 上撤消 – Ervin

Kineticjs撤銷/重做與事件處理程序，形狀和圖像

回答

相關問題