javascript - Kinetic.js 加载问题

Question

我正在尝试从数据库加载已保存的舞台，当我加载它时，它看起来不错，但在加载它之后我无法在舞台上绘制。我知道我可能无法像保存前那样使用加载的对象，但如何在加载后绘制到舞台上？

我正在使用 Kinetic.Node.create(json, 'container');但之后我无法再使用 layer.draw(); 添加到舞台上。

有人有什么建议吗？什么是重新绑定(bind)事件处理程序的好方法。有什么好的教程吗？谢谢!

编辑:

这是我创建和编辑 Canvas 的代码。

var stage = new Kinetic.Stage({
        container: 'container',
        width:screen.width*.98,
        height: screen.height*.70,
        id:'stage',
        name: 'stage'
      });

      var layer = new Kinetic.Layer();
      layer.on('mousedown',function(e){ 
      var node = e.targetNode;
      //select(node);
      });

//load
var json= load();
stage = Kinetic.Node.create(json, 'container');

Answer 1

Q1:重新实例化 Kinetic.Stage。

您的 Kinetic.Node.create 命令是重新实例化阶段的正确命令。由于您未提供代码，因此无法进行进一步诊断。

var stage = Kinetic.Node.create(yourJSON, 'container');
stage.draw();

Q2:重新绑定(bind)事件处理程序。

重新连接事件处理程序的一种好方法是提供一个 .js 文件和您的 .json 文件。

例如:

创建节点/容器时，添加属性以指示需要重新连接哪些事件处理程序:

var circle1 = new Kinetic.Circle({
    x:100,
    y:100,
    radius: 30,
    fill: 'red',

    // this circle should be rewired with myClickHandler1
    clickEvent:"myClickHandler1"

});

将所有事件处理程序放入与 .json 文件一起提供的 .js 文件中:

var eventHandlers={
    myClickHandler1:function(e){alert("Fired clickHandler1");},
}

然后您可以像这样从 .js 文件重新连接事件处理程序:

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
}

// rewire all nodes and containers

stage.getChildren().each(function(node){
   node.rewireHandlers(node);
});