Search code examples
paperjs

paper.js hide/show layer?


I have a layer with a lot of Symbols, and I would like to hide and show that entire layer with all his elements.

to hide I do it with myLayer.remove(); but to show it there is no methods...
On their tutorial they say project.activeLayer.addChild(myObject); but it doesn't seem to work with a layer. (http://paperjs.org/tutorials/project-items/project-hierarchy/)

If someone can help me or tell me if I need to do it differently ?

Thank you very much.


Solution

  • When you call Layer.remove(), that Layer instance is removed from the project.layers array. To re-show the removed layer (and any objects in it), push it back onto project.layers.

    var blueSquare = Path.Rectangle(new Point(0, 0), new Size (50, 50));
    blueSquare.fillColor = 'blue';
    
    var newLayer = new Layer();
    newLayer.activate();    // so that redCircle will be added to newLayer
    var redCircle = Path.Circle(new Point(100, 100), 50);
    redCircle.fillColor = 'red';
    
    newLayer.remove();      // this prevents the redCircle from being drawn
    project.layers.push(newLayer);  // now the redCircle is back
    

    Alternatively, instead of newLayer.remove(); you can use newLayer.visible = false; or newLayer.opacity = 0; so that the newLayer is never actually removed from the project.layers array, although with those approaches selected Items still show wireframes even if the actual Items cannot be seen.