Question

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

我正在寻找管理动作历史的好方法（撤消，重做），我找到了一个非常好的方法，你可以在这里找到它：How to do undo redo

我很高兴它会让我的生活比我想象的更容易，但我错了。它基于Kinetic.Node.create('json', jsonLayer);。虽然第一眼看上去好像很好，但它有一些问题：

删除图层后会丢失对图层的引用，而是创建新的
它会丢失图层内的所有图像
最大的问题是它丢失了层内的事件处理程序，我有很多

您可以向我推荐哪些其他可能性？我正在考虑以下事项：

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

Answer 1

是的，对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);

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

1 个答案: