0

下面是我的代码，正在加载图像并将 onclick 事件绑定到它。我想要的是保存这个阶段并绘制其他内容，即带有后退按钮的下一个屏幕，后退按钮将加载上一个屏幕。但是当我使用 json 保存舞台并重新加载舞台时，舞台显示一切正常，但点击事件会从图像中删除。任何人都可以提供帮助，我希望能够拥有以前的屏幕，因为它包含所有元素及其事件。还有另一种方法可以使用json吗？

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="js/kinetic-v4.3.3.min.js" type="text/javascript"></script> 
<script type="text/javascript">
function loadImages(sources, callback){
    var assetDir = 'http://localhost/kineticdemo/images/';
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources){
      images[src] = new Image();
      images[src].onload = function(){
        if(++loadedImages >= numImages){
          callback(images);
        }
      };
      images[src].src = assetDir + sources[src];
    }
}

function initStage(images)
{
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 730,
      height: 700
    });
    var outerLayer = new Kinetic.Layer();
    var logo = new Kinetic.Image({
              image:images.logo,
              x:450,
              y:75,
              id:"logo"
            });

    logo.on('click',function(){
        alert('aaa');
    });

    outerLayer.add(logo);
    stage.add(outerLayer);

    var json = stage.toJSON();
    stage.destroy();
    stage = Kinetic.Node.create(json, 'container');
    stage.get('#logo').apply('setImage',images.logo);
    stage.draw();
}
var sources = {
    logo: 'logo.png'
};
loadImages(sources, initStage);
</script>
</body>
</html>
4

1 回答 1

0

是的，KineticJS 序列化 Node 属性，但它不序列化 Node 事件处理程序。

因此，rehydrad 阶段会知道哪些节点正在“监听”，但您必须手动重新绑定事件处理程序：

重新水合单击事件处理程序

// re-bind event listener
stage.get('#logo').on('click',  function(e) {  alert('aaa');  }   );

重新水合已序列化为字符串的单击事件处理程序

假设您有原始事件处理程序的代码，您可以使用 javascript 的“Function()”来重新处理已序列化为字符串的事件处理程序。

可能的问题：“new Function()”的上下文始终是窗口上下文，所以你重新水合的事件处理程序将打破闭包（如果你正在使用闭包）。

可能的问题：将字符串作为函数运行是很危险的。你想要“alert('goodness')”，但黑客用“alert('evil')”代替。

// bind an event listener that was serialized to a string
var myStringFn="alert('aaa')";
stage.get('#logo').on('click', new Function("event", myStringFn) );
于 2013-03-16T14:01:12.230 回答