KineticJS问题与可重复的鼠标事件

我在这里没有什么问题（我显然错过了什么）。我从我的更大的应用程序中简化了它：当我点击蓝色矩形时，我向包含红色矩形（可点击）的舞台添加了另一个图层，当我单击此红色矩形时，它将删除带有红色矩形的第二层。KineticJS问题与可重复的鼠标事件

问题：当我点击蓝色矩形第二次，什么都不会发生:(即应用程序只能一次，我需要添加/删除第二层（红色矩形）反复什么是错:)

？

你可以在这里看到它，小提琴http://jsfiddle.net/mAX8r/

代码：

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
body { 
margin: 0px; 
padding: 0px; 
} 
canvas { 
border: 1px solid #9C9898; 
} 
</style> 
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"> 
</script> 
<script> 
window.onload = function() { 
var stage = new Kinetic.Stage({ 
container: 'container', 
width: 578, 
height: 200 
}); 

var layerBlue = new Kinetic.Layer(); 
var layerRed = new Kinetic.Layer(); 

var rectBlue = new Kinetic.Rect({ 
x: 100, 
y: 75, 
width: 100, 
height: 50, 
fill: 'blue', 
stroke: 'black', 
strokeWidth: 4 
}); 
var rectRed = new Kinetic.Rect({ 
x: 300, 
y: 75, 
width: 100, 
height: 50, 
fill: 'red', 
stroke: 'black', 
strokeWidth: 4 
}); 

// mouse events 
rectBlue.on('click', function() { 
stage.add(layerRed); 
stage.draw(); 
}); 
rectRed.on('click', function() { 
layerRed.remove(); 
stage.draw(); 
}); 

// add the shape to the layer 
layerBlue.add(rectBlue); 
layerRed.add(rectRed); 
// add the layer to the stage 
stage.add(layerBlue); 

}; 

</script> 
</head> 
<body> 
<div id="container"></div> 
</body> 
</html>

来源

2012-10-20 nuclearpeace

要隐藏和显示形状，我们可以使用hide（）和show（）方法。试试这个JSFIDDLE http://jsfiddle.net/mAX8r/5/。并且你可以看到下面

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script> 
    <script> 
     var layerBlue; 
     var layerRed; 
     var rectBlue; 
     var rectRed; 
     window.onload = function() { 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 578, 
      height: 200 
     }); 

     layerBlue = new Kinetic.Layer(); 
     layerRed = new Kinetic.Layer(); 

     rectBlue = new Kinetic.Rect({ 
      x: 100, 
      y: 75, 
      width: 100, 
      height: 50, 
      fill: 'blue', 
      stroke: 'black', 
      strokeWidth: 4 
     }); 
     rectRed = new Kinetic.Rect({ 
      x: 300, 
      y: 75, 
      width: 100, 
      height: 50, 
      fill: 'red', 
      stroke: 'black', 
      strokeWidth: 4 
     }); 

     // mouse events 
     rectBlue.on('click', function() { 
      rectRed.show(); 
      stage.draw(); 
     }); 
     rectRed.on('click', function() { 
      rectRed.hide(); 
      stage.draw(); 
     }); 

     // add the shape to the layer 
     layerBlue.add(rectBlue); 
     layerRed.add(rectRed); 

     // add the layer to the stage 
     stage.add(layerBlue); 
     stage.add(layerRed); 
     rectRed.hide(); 
     stage.draw(); 
     }; 

    </script> 
    </head> 
    <body> 
    <div id="container"></div> 
    </body> 
</html>

示例代码，请参阅此网址http://www.html5canvastutorials.com/kineticjs/html5-canvas-hide-and-show-shape-with-kineticjs/对于HTML5画布隐藏和显示一个形状

来源

2012-10-22 09:01:29

是啊，我想到了这招了。如果删除图层并隐藏它并没有实际的区别，这个可以工作。谢谢你的回复！ – nuclearpeace

隐藏层dosn't工作：当我隐藏层，背景层忽略所有鼠标事件:( – nuclearpeace

KineticJS问题与可重复的鼠标事件

回答

相关问题