Question

下面是我的代码，正在加载图像并将onclick事件绑定到它。我想要的是保存这个阶段并绘制其他东西，即带有后退按钮的下一个屏幕，后退按钮将加载前一个屏幕。但是当我使用json和reload stage保存舞台时，舞台显示一切正常，但点击事件从图像中删除。可以任何人帮助，我希望能够拥有所有元素及其事件的前一个屏幕。还有另一种方法，然后使用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>

Answer 1

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

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

重新补充点击事件处理程序

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

重新补充已序列化为字符串的点击事件处理程序

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

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

可能的问题：作为函数运行字符串是危险的黑客攻击。你打算“警觉（'善良'）”，但黑客用“警告（'邪恶'）代替”。

// bind an event listener that was serialized to a string
var myStringFn="alert('aaa')";
stage.get('#logo').on('click', new Function("event", myStringFn) );

在KineticJS中保存和重新加载阶段后，事件绑定将被删除

1 个答案: