使用事件处理程序，形状和图像进行Kineticjs撤消/重做

Question

我正在使用Canvas HTML5开发设计器绘图工具。 我将具有以下功能：添加图像，添加文本，添加形状，旋转，缩放，颜色等...

我正在寻找一种管理动作历史记录的好方法（撤消，重做），我发现了一种非常好的方法，您可以在这里找到它： 如何做撤消重做

我很高兴这将使我的生活比我想象的要轻松，但是我错了。 它基于Kinetic.Node.create('json', jsonLayer); 。 尽管乍一看似乎效果不错，但它仍然存在一些问题：

• 在删除图层并创建新的图层后，它将失去对图层的引用
• 它会松散层内的所有图像
• 最大的问题是它使层内的事件处理程序松散，我有很多

您还能向我推荐什么其他可能性？ 我在考虑以下问题：

• 将操作保存到数组中，然后撤消，我将以编程方式执行相反的操作
• 序列化并将层的每个子级存储在数组中，然后在撤消时我将重建层（看起来太复杂）

Answer 1

是的，Kinetic保存为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);