一直在关注画架,似乎对于什么是关于事件授权的最佳方式感到困惑。这是我正在尝试的:
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/
答案 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。 欢呼声。