Question

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

我有三个不同的层：

只有Kinectic.Rect对象的背景图层;
具有多种形状的元素图层;
以及包含我希望始终位于所有内容之上的元素的顶层。

我在我创建的对象内部的绘图函数中填充这些图层，此对象还具有一个引用背景的shape属性和一个带有要添加到元素图层的元素的contents属性。我的绘图函数代码如下：

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

提前谢谢。

编辑：我能够解决问题，我正在将一个带css的白色背景颜色应用到canvas元素，因为每个图层都创建了一个新的canvas元素，我只能看到最顶层的内容（在这种情况下只是白色）。

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

再次感谢你，对于第一个问题的混淆感到抱歉。

Answer 1

Clear仅用于在重绘之前清除画布。它不会删除添加到图层的对象。因此，对于您的情况，使用remove函数取出附加到图层的对象或者您正在做的其他操作，删除整个图层本身。

使用多个图层 - KineticJS

1 个答案: