可重复鼠标事件的 KineticJS 问题答案

【问题标题】：KineticJS issue with repeatable mouse event可重复鼠标事件的 KineticJS 问题
【发布时间】：2012-10-10 17:37:52
【问题描述】：

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

问题：当我第二次点击蓝色矩形时，什么也没有发生：（即应用程序只能运行一次，我需要重复添加/删除第二层（红色矩形）。怎么了？： )

你可以在这里看到它，小提琴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>

【问题讨论】：

标签： javascript html canvas mouseevent kineticjs

【解决方案1】：

要隐藏和显示一个形状，我们可以使用 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>

请参阅此 URL http://www.html5canvastutorials.com/kineticjs/html5-canvas-hide-and-show-shape-with-kineticjs/ 以了解 HTML5 Canvas 隐藏和显示形状

【讨论】：

是的，我也想过这个动作。如果删除图层和隐藏它没有实际区别，这个可以工作。感谢您的回复！
隐藏层不起作用：当我隐藏层时，背景层会忽略所有鼠标事件:(