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

时间:2014-02-05 11:07:21

标签: javascript html5 html5-canvas kineticjs undo-redo

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

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

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

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

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

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

1 个答案:

答案 0 :(得分: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);