KineticJS issue with repeatable mouse event
- by nuclearpeace
I have noob issue here (i obviously missing something). I simplified it from my bigger application:
When i click blue rectangle, i add another layer to the stage that includes red rectangle (clickable), when i clik this red rectangle it removes second layer with red rect.
Problem: When i click blue rect second time, nothing happens :( i.e. app works only once, and i need to add/remove second layer(with red rect) repeatedly. What's wrong? :)
You can see it here, Fiddle http://jsfiddle.net/mAX8r/
Code:
<!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>
