Search code examples
javascripthtmlangularjshtml5-canvaskineticjs

Checking visibility of layer in KineticJS


I am trying to figure out how to check whether or not a layer in KineticJS is visible. I need this in order to appropriately toggle the visibility of any given layer when the user clicks a button. If it's visible, I want to hide it when they click the button. If it isn't visible, then I want to show it. Thoughts? I saw that there is a isVisible function, but nothing at all happens when I try to use it on a layer. The below code doesn't error, but it isn't doing anything. This is written in KineticJS on Angular. In my tests, I found that this event is appropriately getting triggered, so it's not that. I also found that the draw function is appropriately firing.

scope.$on('layertoggle', function(event){
 var layerShapes = scope.kineticStageObj.get('#layer1');
 if(!layerShapes.isVisible()){
    layerShapes.hide();
 }
 else{
    layerShapes.show();
 }
 scope.kineticStageObj.draw();
});

Solution

  • Try this:

    var layerShapes = scope.kineticStageObj.get('#layer1')[0];
    

    get returns a collection of shapes that match that criteria. Despite id being unique, you still have to access the first position of the array to access the desired shape.