如何在easeljs 0.7.0中处理事件调度

时间:2013-11-21 16:28:20

标签: javascript events easeljs

一直在关注画架,似乎对于什么是关于事件授权的最佳方式感到困惑。这是我正在尝试的:

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 个答案:

答案 0 :(得分:1)

hitArea会自动与Shape对齐,所以你应该设置x&矩形的y为0,0。

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

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

我打开鼠标悬停并设置光标,这样可以更容易地显示hitArea。 欢呼声。