easelJS Extjs에서 토글 된 오버레이를 만드는 방법

Question

저는 새로운 프로그래머입니다. extJS 및 이젤을 사용하여 대화식 요소를 만들려고합니다. 버튼을 클릭하면 오버레이가 이미지가됩니다. .하지만 이미지를 켜고 끌 수있게하려면 ... 토글 핸들러를 사용하여 토글을 활성화했지만 물건이 작동하지 않습니다. 여기

내 코드입니다 :

Ext.define('EaselWindow', { 
width: 1000, 
height: 750, 
extend: 'Ext.Window', 


html: '<canvas id="demoCanvas" width="1000" height="750">' 
    + 'alternate content' 
    + '</canvas>' 



,afterRender: function() { 
    this.callParent(arguments); 


    stage = new createjs.Stage("demoCanvas"); 

    //var myImage = new createjs.Bitmap("dbz.jpg"); 
    //stage.addChild(myImage); 
    //stage.update(); 
      var myImage = new Image(); 
      myImage.src = "dbz.jpg"; 
      myImage.onload = setBG; 


      function setBG(){ 
      var bgrd = new createjs.Bitmap(myImage); 
      stage.addChild(bgrd); 
      stage.update(); 


      bgrd.addEventListener("click", function(){ 
      var seed = new createjs.Bitmap("seed.jpg"); 
      seed.alpha = 0.5; 
      seed.x = stage.mouseX-10 ; 
      seed.y = stage.mouseY-10 ; 
      stage.addChild(seed); 
      stage.update(); 
      }); //end addeventlistener 



      } 

         }, // end after render func 
items:[{ 
     itemId: 'button1', 
     xtype: 'button', 
     text: 'click the button', 
     visible: true, 
     enableToggle: true, 
     listeners: {'click': 
     function(){ 

     var overlay = new createjs.Bitmap("stuff.jpg"); 
     overlay.alpha = 0.5; 
     stage.addChild(overlay); 
     stage.update(); 
     }// end func 

     } 


     },{ 
     itemId: 'button2', 
     xtype: 'button', 
     text: 'button2' 

     }] 

}); // end define 

Ext.create('EaselWindow', { 
title: "Ext+Easel", 
autoShow: true 
}); //end easelwindow 

}); 

내가 어떻게 든로 removeChild와 if 문을 만들 수있는 생각했다 ...하지만 나는 그것이 작동 할 수 없었다, 나는

function(button1, state){ 
     if(this.state=true){ 
     var overlay = new createjs.Bitmap("stuff.jpg"); 
     overlay.alpha = 0.5; 
     stage.addChild(overlay); 
     stage.update(); 
     } 
     else 
     {stage.removeChild(overlay); 
     stage.update(); 
     } 

     }// end func 

Answer 1

같은 것을 시도

awww 나는 그것을 사용하여 알아 냈다

toggleHandler: 
     function(button, pressed){ 
     if(button.pressed==true){ 
     overlay = new createjs.Bitmap("stuff.jpg"); 
     overlay.alpha = 0.5; 
     stage.addChild(overlay); 
     stage.update(); 
     } 
     else 
     {stage.removeChild(overlay); 
     stage.update(); 
     } 

     }// end func