使用多层 - KineticJS

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

我有三个不同的层：

• 仅包含 Kinetic.Rect 对象的背景层；
• 具有多种形状的元素层；
• 顶层包含我希望始终位于所有内容之上的元素。

我将这些图层填充到我创建的对象内的绘制函数中，该对象还有一个引用背景的 shape 属性和一个包含要添加到元素图层的元素的内容属性。我的绘制函数的代码如下：

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 上的检查元素检查了它），并且在文档中它说绘图函数绘制了所有图层......我在这里做错了什么吗？或者说这是不可能的？如果不可能，为什么我需要一个图层和一个舞台？一个还不够吗？

先感谢您。

Edit：我能够解决这个问题，我将带有 css 的白色背景颜色应用于画布元素，并且由于每个层都在其他层之上创建一个新的画布元素，所以我只能看到最顶层的内容（在这种情况下只是白色的）。

但是，我仍然遇到与多层相关的问题，这是我以前只使用一层时没有遇到的问题。当我在舞台上使用清除功能时，它应该清除图层，对吧？但相反，图层保持完全相同，即使我尝试在每个单独的图层上调用清除，它们也不会改变...我还在清除它们后使用舞台绘制函数，但仍然没有任何变化...到目前为止我找到的唯一解决方案是从舞台上删除图层并再次添加它：s 有没有更好的方法来重置图层内容？

再次感谢您，并对第一个问题造成的困惑表示歉意。

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