How to draw back into the scene a removed shape with Konva?

Question

I used remove() method to delete a rectangle from the scene, how can i draw it back?

The documentation said: "remove a node from parent, but don't destroy. You can reuse the node later."

Link to documentation

I couldn't find any clue Thanks

Can you make a small demo of your code? Do you use `vue-konva`? If so, you should not delete a node manually, just remove it from the template or render function. — lavrton, Aug 21 '20 at 13:06

score 2 · Answer 1 · answered Aug 24 '20 at 10:33

2

Thank you for the responses, i actually found a simple workaround.

I use .hide() and .show() methods because i want to keep intact the object for later use and when i do not need it anymore i'll just .destroy() the shapes.

The downside is you need more memory to keep all, but with few shapes on the scene is negligible.

answered Aug 24 '20 at 10:33

Eco

41
4

Good to know you found a solution that works for you. Did you try my suggestion - it should have been as good as your own as the two are functionally equivalent in your question context? – Vanquished Wombat Aug 24 '20 at 12:47

score 1 · Answer 2 · answered Aug 22 '20 at 15:02

Just keep a reference to the node via a variable. For example, in the code below I add a node to layer1, remove it, and add it to layer2.

var layer1 = new Konva.Layer();
stage.add(layer1);
Var node = new Konva.WhateverShape({....});
layer1.add(node);
layer1.draw();
...
...
var layer2 = new Konva.Layer();
stage.add(layer2);
node.remove();   // at this time the node exists but is not on the stage
layer2.add(node);
layer2.draw();  // now the node is visible again.

How to draw back into the scene a removed shape with Konva?

2 Answers2