Working with Multiple Layers - KineticJS
- by Bruno Sampaio
I'm using KineticJS 4.0.5 and I'm currently trying to draw the contents of several layers but only the last one added to stage is drawn... If I understood the documentation correctly this should be possible, otherwise why would we need a layer?
I have three different layers:
a background layer with just a Kinectic.Rect object;
a elements layer with several types of shapes;
and a top layer with elements I want to be always on top of everything.
I populate those layers inside a draw function I have inside a object I created, this object also has a shape attribute which refers to the background and a contents attribute with the elements to add to the elements layer. My code for the draw function is the following:
this.draw = function() {
var stage = E.game.stage, layers = E.game.layers;
stage.clear();
// Add Background
this.shape.setSize(stage.getWidth(), stage.getHeight());
layers.background.add(this.shape);
// Iterate over contents
for(var i = 0; i < this.contents.length; i++) {
layers.elements.add(this.contents[i].shape);
}
// Draw Everything
stage.add(layers.background);
stage.add(layers.elements);
stage.add(layers.top); // This one is currently empty
stage.draw();
}
After running this function, only layers.top is drawn in the canvas, and if I comment the line where it is added only layers.elements is drawn. However the stage has 3 childrens (I checked it with inspect element on chrome) and in the documentation it says the draw function draws all layers... Am I doing something wrong here? Or it isn't possible? And if it's not possible why would I need a layer and a stage? Wouldn't one be enough?
Thank you in advance.
Edit: I was able to solve the problem, I was applying a white background color with css to the canvas element and since each layer creates a new canvas element above the others I could only see the contents for the top most layer (in this case just white).
However, I still have a problem related with multiple layers that I didn't have before with just one layer. When I use the clear function on the stage it should clear the layers right? But instead the layers remain exactly the same, even if I try to call clear on each individual layer they won't change... I'm also using the stage draw function after clearing them but still no changes at all... The only solution I found until now was by removing the layer from the stage and adding it again :s Is there a better way to reset the layers contents?
Thank you again and sorry for the confusion with the first question.
