在 EaselJS 中向图像添加事件

Question

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

这是我的代码

 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 
});

编辑添加：itemId：'button2'， xtype: '按钮', 文本：'添加种子'， 启用切换：真， 处理程序：功能（按钮，按下）{ 如果（按钮。按下==真）{ bgrd.addEventListener('click', function(){
种子 = new createjs.Bitmap("seed.jpg"); 种子.alpha = 0.5; 种子.x = stage.mouseX-10 ; 种子.y = stage.mouseY-10 ; storex=种子.x； 层=种子.y; console.log(storex +","+ 层); stage.addChild(种子); stage.update();

                       })   

              } 

           } //end addeventlistener

但是一旦按下按钮，如果带有 if 语句条件，我不明白为什么，有没有办法说 else（关闭）

Answer 1

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

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

    bgrd.addEventListener('click', onClick);

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

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

这是顺便说一句。 EaselJS-docs 中有很好的记录：http://www.createjs.com/Docs/EaselJS/classes/EventDispatcher.html，并且有大量的例子可以解决这个问题以及您在 Github 上寻找的大多数其他情况：

https://github.com/CreateJS/EaselJS/tree/master/examples 和 https://github.com/CreateJS/sandbox