javascript - KineticJS 删除和添加图层

Question

我觉得我非常愚蠢，但由于某种原因，我无法解决这个问题。

我想要 3 个单独的图层，每个图层上可以有多个对象/形状，然后单击我希望删除或隐藏可见图层并显示下一个图层。

我认为我的问题是在逻辑中死去并调用函数。这是函数和jsfiddle：

var version = 0;    
function layerVersion() {
  if (version === 1) {
    stage.add(layerBlue);
    layerBlue.on('click', function() {
      layerOrange.hide;
      version = 2;
    });
  } else if (version === 2) {
    stage.add(layerOrange);
  } else {
    stage.add(layerPink);
    layerpink.on('click', function() {
      layerPink.hide;
      version = 1;
    });
  }
}

这是 jsFiddle 链接：http: //jsfiddle.net/TJ96r/2/

任何帮助将不胜感激，因为无法弄清楚我感到很愚蠢。

Answer 1

看一下这个。 http://jsfiddle.net/TJ96r/3/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
});
var layerPink = new Kinetic.Layer();
layerPink.hide();
var layerBlue = new Kinetic.Layer();
var layerOrange = new Kinetic.Layer();
layerOrange.hide();

  // pink box
  var pink = new Kinetic.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    fill: 'pink',
    stroke: 'black',
    strokeWidth: 2
  });
  // blue box
  var blue = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 2
  });
  // orange box
  var orange = new Kinetic.Rect({
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    fill: 'orange',
    stroke: 'black',
    strokeWidth: 2
  });

  layerPink.add(pink);
  layerBlue.add(blue);
  layerOrange.add(orange);

  var version = 0;
      stage.add(layerBlue);
      stage.add(layerOrange);
      stage.add(layerPink);

layerBlue.on('click', function() {
        layerBlue.hide();
        layerOrange.show();
        layerPink.hide();
    stage.draw();
      });
layerOrange.on('click', function() {
        layerBlue.hide();
        layerOrange.hide();
        layerPink.show();
    stage.draw();
      });
layerPink.on('click', function() {
        layerPink.hide();
        layerOrange.hide();
        layerBlue.show();
    stage.draw();
      });