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

下面是我的代码，我正在加载一个图像并绑定onclick事件。我想要的是保存这个阶段，并画一些其他的东西，即下一个屏幕后退按钮，后退按钮将加载前一个屏幕。但是当我使用json保存舞台并重新载入舞台时，舞台显示一切正常，但点击事件从图像中删除。任何人都可以提供帮助，我希望能够像之前的所有元素和事件一样拥有前一个屏幕。有没有另外一种方法，然后使用json可以做到这一点？在KineticJS中保存和重载阶段后事件绑定被删除

<!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>

来源

2013-03-16 Rajeev Vyas

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

所以，再水化阶段将知道哪些节点在“监听”，但你必须手动重新绑定的事件处理程序：

重新保湿单击事件处理程序

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

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

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

可能的问题：“新函数（）”的上下文始终是窗口上下文，因此您的重新合并的事件处理程序将关闭（如果您正在使用闭包）。

可能的疑难杂症：作为函数运行字符串是危险的hackable。你打算“提醒（'善良'）”，但黑客替代“警觉（'邪恶'）”。

// 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-16 14:01:12 markE

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

回答

相关问题