0

我希望我能在我想做的事情上得到一点帮助。我正在学习 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：'button'，文本：'addSeed'，enableToggle：true，处理程序：function（button，pressed）{if（button.pressed==true）{bgrd.addEventListener（' click', function(){
seed = new createjs.Bitmap("seed.jpg"); seed.alpha = 0.5; seed.x = stage.mouseX-10 ; seed.y = stage.mouseY-10 ; storex= seed .x; 层= seed.y; console.log(storex +","+ 层); stage.addChild(seed); stage.update();

                       })   

              } 

           } //end addeventlistener

但是，一旦按下按钮，如果 w/if 语句条件我不明白为什么，点击的能力仍然存在，有没有办法说 else （关闭）

4

1 回答 1

3

您可以在 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

于 2013-07-30T21:09:29.183 回答