Question

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

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

有没有人有任何建议？什么是重新绑定事件处理程序的好方法。有没有好的教程？谢谢！

编辑：

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

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：重新绑定事件处理程序。

重新布线事件处理程序的一个好方法是提供.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);
});

Answer 2

首先在你的json字符串中你需要替换所有＆＃34; className＆＃34; ：＆＃34; Kinetic.Group＆＃34; to＆＃34; className＆＃34; ：＆＃34; Group＆＃34;然后尝试

Kinetic.js负载问题

2 个答案: