Events 在EaselJS中将事件添加到图像

我希望我能在我想做的事情上得到一些帮助。我正在学习EaselJS和Extjs，但还是有点新。我正在尝试创建一个extJS窗口，在窗口内我添加了一个画布，我使用easelJS来操纵它。在按钮1上，我添加了一个事件处理程序，它将覆盖一个图像。。。我要做的是使叠加的图像具有事件。从长远来看，我希望能够突出显示该图像，并将鼠标单击的重叠图像数存储到该图像上

这是我的密码

 var stage;
var overlay;
var overImage;
 var myImage;
var bgrd;
Ext.onDocumentReady( function () {




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




    function setBG(){
              myImage = new Image();
              myImage.src = "dbz.jpg";
              bg();
              }

    function bg(){
              bgrd = new createjs.Bitmap(myImage);
              stage.addChild(bgrd);
              stage.update();
              }









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");
            stage.onload = setBG();
      }, // end after render func
listeners: {

       click: {
           element: 'body',
           fn:    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
              }

         },





  items:[{ 
       itemId: 'button1',
       xtype: 'button',
       text: 'click the button',
       visible: true,
       enableToggle: true,

       toggleHandler:
       function(button, pressed){
           if(button.pressed==true){
               overImage = new Image();
               overImage.src = "stuff.jpg";
               overlay = new createjs.Bitmap(overImage);

               stage.addChild(overlay);

               stage.update();
               }
            else
             {stage.removeChild(overlay);
             stage.update();
             }

        }// end func




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

        }]

}); // end define

Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true,

 }); //end easelwindow

 overImage.addEventListener("mouseover", function(){
                                        overlay.alpha=0.7;
                                        }); // this function isn't working 
});

---

但是，一旦按下按钮，如果带有if语句条件，单击的功能将保持打开状态。我不明白为什么，有没有办法说else（关闭）

您可以在EaselJS中添加EventListeners，如下所示：

function bg(){
    bgrd = new createjs.Bitmap(myImage);

    bgrd.addEventListener('click', onClick);

    stage.addChild(bgrd);
    stage.update();
}

function onClick() {
    console.log('bgrd was clicked.');
}

这是顺便说一句。在EaselJS文档中有很好的文档记录：在Github上，有很多关于这个和大多数其他情况的示例，请访问：

和

---

您可以在EaselJS中添加EventListeners，如下所示：

function bg(){
    bgrd = new createjs.Bitmap(myImage);

    bgrd.addEventListener('click', onClick);

    stage.addChild(bgrd);
    stage.update();
}

function onClick() {
    console.log('bgrd was clicked.');
}

这是顺便说一句。在EaselJS文档中有很好的文档记录：在Github上，有很多关于这个和大多数其他情况的示例，请访问：

和

---

我在代码末尾尝试过这样做，有没有办法在按钮的“like listeners”部分中单击？我只想要bgrd.addEventListener（'click'，onClick）；当按下按钮时运行。我添加了类似于此的内容NVM获得了一个删除侦听器ty：我在代码末尾尝试了类似的操作，是否有方法在按钮的“类似侦听器”部分中执行onClick？我只想要bgrd.addEventListener（'click'，onClick）；当按下按钮时运行。我添加了类似于此的内容NVM使用移除侦听器ty:D获得它