EaselJS의 이미지에 이벤트 추가

Question

나는 내가하려는 일에 조금 도움이되기를 바랬습니다. 나는이지 엘 JS, Extjs를 배우고있다. 그러나 아직도 조금 새로운. extJS 창을 만들려고하는데, 창 안에는 easelJS를 사용하여 조작하는 캔버스를 추가했습니다. button1에 이미지를 오버레이 할 이벤트 핸들러를 추가했습니다 ... 내가하려고하는 것은 오버레이 된 이미지에 이벤트가 발생하도록 만드는 것입니다. 장기적으로 볼 때 그 이미지를 강조 표시하고 마우스로 겹쳐서 표시된 이미지의 수를 이미지에 저장할 수 있기를 바랍니다. 항목 ID : : '단추 2', 위해 xtype : '버튼', 텍스트 : 'addSeed', enableToggle : 여기

내 코드를 추가하는

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

편집있는 경우에 true를, 핸들러 : 기능 (버튼 , press) { if (button.pressed == true) { bgrd.addEventListener ('클릭', 함수() {
시드 = 새 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 + ","+ 층); stage.addChild (seed); stage.update();

     }) 

       } 

      } //end addeventlistener 

하지만,하지만, 버튼을 클릭 할 수있는 능력을 누르면되면 if 문 조건/나는 이유를 이해하지 않습니다 승 경우에 남아 다른 말을 할 수있는 방법이

Answer 1

(해제) 당신 다음과 같이 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