Kinetic.js 加载问题答案

【问题标题】：Kinetic.js Load IssuesKinetic.js 加载问题
【发布时间】：2014-05-27 10:36:53
【问题描述】：

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

我正在使用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');

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案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);
});

【讨论】：

感谢您的回复！我会试试的，如果你想看的话，我已经在上面发布了我的画布创建和加载代码，我不确定这是否能告诉你我的问题可能是什么。再次感谢！

【解决方案2】：

首先在您的 json 字符串中，您需要将所有 "className" : "Kinetic.Group" 替换为 "className" : "Group" 然后尝试

【讨论】：