1

ここではほとんど問題はありません (明らかに何かが欠けています)。より大きなアプリケーションから単純化しました。青い四角形をクリックすると、赤い四角形 (クリック可能) を含む別のレイヤーがステージに追加されます。この赤い四角形をクリックすると、赤い四角形の 2 番目のレイヤーが削除されます。

問題:青い四角形を 2 回クリックしても、何も起こりません:(つまり、アプリは 1 回しか動作せず、2 番目のレイヤー (赤い四角形) を繰り返し追加/削除する必要があります。何が問題なのですか? :)

ここで見ることができます、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>

</p>

4

1 に答える 1

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>

HTML5 Canvas Hide and Show a Shape については、この URL http://www.html5canvastutorials.com/kineticjs/html5-canvas-hide-and-show-shape-with-kineticjs/を参照してください。

于 2012-10-22T09:01:29.127 に答える