Question

我是一名新程序员，我正在尝试使用extJS和Easel创建一些交互式元素...... 我有一个按钮，当你点击它时，它覆盖了一个图像...但我希望能够打开和关闭图像...我尝试使用toggleHandler并启用切换但是东西不起作用。

这是我的代码：

  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

我通过使用

来解决这个问题

  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

如何在easelJS Extjs中切换叠加层

1 个答案: