將事件添加到EaselJS中的圖像

我希望能夠對我正在嘗試做的事情有所幫助。我正在學習EaselJS，Extjs，但仍然有點新。我正在嘗試創建一個extJS窗口，在窗口內部我添加了一個使用easelJS進行操作的畫布。在按鈕1上，我添加了一個覆蓋圖像的事件處理程序...我想要做的是使覆蓋的圖像具有事件。從長遠來看，我希望能夠突出顯示該圖像，並將從鼠標點擊的覆蓋圖像的數量存儲在該圖像上。將事件添加到EaselJS中的圖像

這裏是我的代碼

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： '按鈕2'，的xtype： '按鈕'，文字： 'addSeed'， enableToggle：真實，處理：功能（按鍵，按下）{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; storey = seed.y; console.log（storex +「，」+ storey）; stage.addChild（seed）; stage.update（）;

     }) 

       } 

      } //end addeventlistener

但但一旦按下按鈕，單擊能力仍然在當w/if語句的條件，我不明白爲什麼，有沒有辦法說別人（關閉）

來源

2013-07-30 Ryan Williams

你可以在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.'); 
}

這是btw。非常有據可查的EaselJS-文檔：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-30 21:09:29 olsn

我試圖在做類似的東西我的代碼結束了，有沒有辦法讓onClick像按鈕的偵聽器部分那樣發生？我只想要bgrd.addEventListener（'click'，onClick）;按下按鈕時運行。 –

我加了這樣的東西 –

NVM把它與一個刪除監聽器ty：D –

將事件添加到EaselJS中的圖像

回答

相關問題