Understanding Canvas & KineticJS layer clearing

Question

I wondered if anyone could shed some light on the way in which layers are managed in Canvas and KineticJS. I'm struggling understand why when i clear(); a layer, then use the draw(); function on that layer again, it comes back with the shapes etc that I originally add to that layer.

for example:

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

I assumed clearing a layer completely removes it, and in order to redraw it i would have to set up new shapes and construct a new layer.

If anyone could explain this too me I would be very thankful.

Cheers, Caius

sorry for the confusion! I'll work on beefing up the KineticJS docs — Eric Rowell, Mar 24 '12 at 04:20
@EricRowell it would be awesome if you could add a .removeAll function! — Adam K Dean, Apr 29 '12 at 14:43

score 10 · Accepted Answer · edited Oct 26 '14 at 15:05

10

One has to be honest that this documentation is not be considered uber-verbose, but as you can see here: http://jsfiddle.net/vPGbz/2/ clear will only remove the drawn representation of a layer from the Stage object. What you are looking for is the remove method that is used to remove certain elements from the layer.

Like:

circleLayer.remove(circle);

edited Oct 26 '14 at 15:05

Halil

1,795
1
24
39

answered Mar 22 '12 at 15:09

m90

11,434
13
62
112

This helps, thanks. The documentation is rather vague I'm quite used to reading API Docs, but this I find difficult to decipher. – Caius Eugene Mar 22 '12 at 15:26
@m90 The documentation is atrocious. I find the only useful is the tutorial section, but if that doesn't answer your question(s), you are out of luck – puk Oct 13 '12 at 00:21
5

update on KineticJS - you can now remove nodes like this: circle.remove(). Parent container is no longer needed for node removal – Eric Rowell Oct 20 '12 at 21:53

Adam K Dean · Answer 2 · 2012-04-29T15:31:45.940

7

~~For now, you could do layer.children = []; but I don't know if this will have any side effects that it shouldn't!~~

Edit: Don't do this. Instead, do this: layer.removeChildren() found at http://kineticjs.com/api-docs.php under Container.

edited Apr 29 '12 at 15:31

answered Apr 29 '12 at 14:47

Adam K Dean

7,387
10
47
68

Laura Liparulo · Answer 3 · 2013-02-27T17:55:57.703

I'm using Kinetics 4.3.1. I'm making two layers, so I can add and remove one of them with the checkbox,

you can check this link out: http://jsfiddle.net/lauraliparulo/uw25p/

Something like this:

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

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

    });

:-)

Understanding Canvas & KineticJS layer clearing

3 Answers3