使用多层- KineticJS

Question

我正在使用KineticJS 4.0.5，我目前正在尝试绘制几个层的内容，但是只有最后一个添加到舞台的内容被绘制出来。如果我正确地理解了文档，这应该是可能的，否则我们为什么需要一个层？

我有三个不同的层次：

• 只有一个Kinectic.Rect对象的背景层；
• 具有多种形状的元素层；
• 和一个顶层的元素，我想永远在上面的每件事。

我在我创建的对象中的一个绘图函数中填充了这些层，这个对象还有一个形状属性，它引用背景，并带有要添加到元素层的元素的内容属性。绘制函数的代码如下：

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。然而，这个阶段有三个孩子(我用铬上的检查元素检查了它)，在文档中，它说绘制函数绘制所有层.我在这里做错什么了吗？还是不可能？如果这是不可能的，为什么我需要一个图层和一个舞台？一个还不够吗？

提前谢谢你。

编辑：我能够解决这个问题，我将一个带有css的白色背景颜色应用到画布元素中，因为每个层都在其他层之上创建了一个新的画布元素，所以我只能看到最顶层的内容(在本例中是白色的)。

然而，我仍然有一个与多个层相关的问题，而我以前只使用过一个层。当我在舞台上使用清晰的功能时，它应该清除层次，对吗？但是这些层保持完全相同，即使我试图对每个单独的层调用清楚，它们不会改变.我也使用舞台抽签功能后，清除他们，但仍然没有任何变化，在任何..。到目前为止，我找到的唯一解决方案是从舞台上移除该层，并再次添加它:s是否有更好的方法来重置层内容？

再次感谢您，并对第一个问题的混淆表示歉意。

Answer 1

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