处理多层-KineticJS [英] Working with Multiple Layers - KineticJS

问题描述

我使用的是KineticJS 4.0.5，目前正在尝试绘制几层的内容，但是只绘制了添加到舞台上的最后一层...如果我正确理解了文档，这应该是可能的，否则为什么呢?我们需要一层吗?

我有三个不同的层:

• 仅带有Kinectic.Rect对象的背景层；
• 具有几种类型的形状的元素层；
• 还有一个顶层，我希望元素始终位于一切之上.

我在我创建的对象内部的绘图函数中填充这些层，该对象还具有一个shape属性，该属性引用背景，并具有一个content属性，其中包含要添加到elements层的元素.我为draw函数编写的代码如下:

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();
}

运行此功能后，画布上仅绘制layers.top，如果我在添加该行的行上进行注释，则仅绘制layers.elements.但是舞台有3个孩子(我在chrome上用inspect元素对其进行了检查)，并且在文档中说draw函数绘制了所有图层...我在这里做错什么了吗?还是不可能?如果不可能，为什么我需要一个图层和一个舞台?不够吗?

谢谢.

编辑:我能够解决此问题，我将白色背景色和CSS应用于画布元素，并且由于每一层都在其他层之上创建了一个新的画布元素，因此我只能看到最顶层的内容(在本例中为白色).

但是，我仍然遇到与多层相关的问题，而以前只有一层没有.当我在舞台上使用清除功能时，应该清除图层对吗?但是相反，即使我尝试在每个单独的图层上调用clear，它们也不会更改，而这些图层仍保持完全相同.在清除它们之后，我仍在使用舞台绘制功能，但仍然没有任何改变.................................................直到现在，我发现的唯一解决方案是从舞台上删除该图层并再次添加它:s是否有更好的方法来重置图层内容?

再次感谢您，对于第一个问题的困惑.

解决方案

清除只是为了在重新绘制画布之前清除画布.它不会删除添加到图层的对象.因此，对于您的情况，请使用remove函数来取出附加到该图层的对象，或者像您所做的那样，删除整个图层本身.

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.

解决方案

Clear is simply for clearing the canvas before redrawing it. It does not remove the objects added to the layers. So for your case, use the remove function to take out the objects attached to the layer or otherwise like you are doing, removing the entire layer itself.

这篇关于处理多层-KineticJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！