Question

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

问题：当我第二次点击蓝色矩形时，没有任何反应:(即app只能工作一次，我需要重复添加/删除第二层（红色矩形）。出了什么问题？：）

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

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

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

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

1 个答案: