我在这里没有什么问题(我显然错过了一些东西)。我从更大的应用程序中简化了它: 当我单击蓝色矩形时，我向舞台添加另一个层，其中包括红色矩形(可单击)，当我单击这个红色矩形时，它会删除带有红色矩形的第二层。
问题:当我第二次单击蓝色矩形时，没有任何反应:(即应用程序只能运行一次，并且我需要重复添加/删除第二层(带有红色矩形)。出了什么问题？: )
你可以在这里看到它，Fiddle 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>
最佳答案
要隐藏和显示形状，我们可以使用 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 Canvas 隐藏和显示形状
关于javascript - KineticJS 与可重复鼠标事件的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12985542/