了解Canvas和KineticJS图层清除

Question

我想知道有没有人能够解释一下Canvas和KineticJS中图层管理的方式。当我使用clear()函数清除一个图层后，再次使用draw()函数时，为什么该图层会显示最初添加到该图层中的形状等内容，我很难理解。

例如：

http://jsfiddle.net/vPGbz/1/

我曾认为完全清除一个图层会将其删除，为了重新绘制它，我需要设置新的形状并构建一个新的图层。如果有人能解释一下这个问题，我将非常感激。祝好，Caius。

- Caius Eugene

---

抱歉造成困惑！我会努力完善KineticJS文档。 - Eric Rowell

@EricRowell 如果你能添加一个.removeAll函数，那就太棒了！ - Adam K Dean

@EricRowell 不用管了，我找到了 removeChildren()。 - Adam K Dean

Answer 1

要诚实地说，这份文档并不算特别详细，但是你可以在这里看到：http://jsfiddle.net/vPGbz/2/。使用clear只会从Stage对象中移除层的绘制表示。你要找的是用于从层中删除某些元素的remove方法。

比如：

circleLayer.remove(circle);

- m90

---

这很有帮助，谢谢。文档描述比较模糊，我通常很习惯阅读API文档，但是我发现这很难理解。 - Caius Eugene

@m90 这份文档糟透了。我发现唯一有用的部分是教程部分，但如果那里不能回答你的问题，你就没办法了。 - puk

KineticJS的更新 - 现在您可以像这样删除节点：circle.remove()。不再需要父容器来删除节点。 - Eric Rowell

Answer 2

目前，您可以执行layer.children = [];但我不知道这是否会产生任何不应有的副作用！

编辑：不要这样做。相反，请执行：layer.removeChildren()，在http://kineticjs.com/api-docs.php下找到Container。

- Adam K Dean

Answer 3

我正在使用Kinetics 4.3.1。

我正在创建两个图层，因此我可以通过复选框添加和删除其中一个。

你可以查看这个链接：http://jsfiddle.net/lauraliparulo/uw25p/

类似于这样：

checkBoxItem.addEventListener('click', function() {
        if (this.checked) {
            load();
            stage.add(layer2);
        }

        else if (!this.checked) {
            layer2.clear();
        }

    });

:-)

- Laura Liparulo