我正在使用Canvas HTML5开发设计器绘图工具。我将具有以下功能:添加图像,添加文本,添加形状,旋转,缩放,颜色等...
我正在寻找管理动作历史的好方法(撤消,重做),我找到了一个非常好的方法,你可以在这里找到它:How to do undo redo
我很高兴它会让我的生活比我想象的更容易,但我错了。它基于Kinetic.Node.create('json', jsonLayer);
。虽然第一眼看上去好像很好,但它有一些问题:
您可以向我推荐哪些其他可能性?我正在考虑以下事项:
答案 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);