2013-11-21 1 views
0

смотрел на easeljs и, похоже, путался о том, что лучше всего подходит для делегирования событий. Вот что я хочу:Как обрабатывать диспетчеризацию событий в easeljs 0.7.0

function init() { 
    var canvas = document.getElementById('canvas'); 
    var stage = new createjs.Stage(canvas); 

    var txt1 = new createjs.Text('Test With Hit Area', '24px Arial', '#0000ff'); 
    txt1.x = 50; 
    txt1.y = 50; 
    console.log('txt1', txt1); 
    var hit = new createjs.Shape(); 
    hit.graphics.beginFill('#000000').drawRect(500, 50, txt1.getMeasuredWidth(), txt1.getMeasuredHeight()) 
    txt1.hitArea = hit; 
    // neither seem to work with a hitArea 
    // txt1.addEventListener('click', handleClick); 
    txt1.on('click', handleClick); 

    var txt2 = new createjs.Text('Test Without Hit Area', '24px Arial', '#0000ff'); 
    txt2.x = 50; 
    txt2.y = 80; 
    console.log('txt2', txt2); 
    // both addEventListener() and on() work fine without hit area 
    // txt2.addEventListener('click', handleClick); 
    txt2.on('click', handleClick); 


    stage.addChild(txt1, txt2); 
    stage.update(); 
} 

function handleClick() { 
    console.log('clicked', this); 
} 

init(); 

Я создал простой jsfiddle продемонстрировать мои попытки здесь: http://jsfiddle.net/brrWn/1/

ответ

1

hitArea автоматически выравнивать себя с формой, так что вы должны установить х & у прямоугольника до 0,0.

hit.graphics.beginFill('#000000') 
    .drawRect(0, 0, txt1.getMeasuredWidth(), txt1.getMeasuredHeight()) 

http://jsfiddle.net/lannymcnie/brrWn/2/

Я включил при наведении курсора мыши и установите курсор, что делает его легче визуализировать hitArea. Cheers.

+0

Отлично! Большое спасибо за этого Лэнни. Я бы никогда не узнал это сам. OOC, вы знаете, если это где-то в документации? –

+0

Да, это задокументировано в свойстве «hitArea» - хотя, возможно, это может быть яснее. http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#property_hitArea – Lanny

Смежные вопросы