CODEWITHSUNDEEP
javascriptcanvaskineticjs
user831496
user831496

Reputation: 35

KineticJS removing and adding layers

I feel I am being incredible stupid but for some reason am blind to being able to fix this issue.

I want 3 individual layers, each that can have multiple object/shapes on them and then on click I want the visible layer to be removed or hid and the next layer to appear.

I think my issue is dying in the logic and calling the function. Here is the function and the 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;
    });
  }
}

Here is the jsFiddle link: http://jsfiddle.net/TJ96r/2/

Any help would be much appreciate I feel so dumb for not being able to figure it out.

Upvotes: 0

Views: 697

Answers (1)

Ani
Ani

Reputation: 1655

Check this out. 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();
      });

Upvotes: 1

Related Questions