html - 如何为 EaselJS DisplayObject 使用动态调整大小的 hitArea？

Question

我想在我的 EaselJS 项目中使用 hitArea 来捕获点击事件，但是我分配的 hitArea 形状似乎没有得到尊重。

jsFiddle 示例

var stage = new createjs.Stage($("#game")[0]);

// This will be a big button
var container = new createjs.Container();
stage.addChild(container);

// This defines the hit area of the button
var hitArea = new createjs.Shape();
var hitAreaGraphics = hitArea.graphics;
// A 1x1 black square, centered about the origin
hitAreaGraphics.beginFill("#000").drawRect(-0.5, -0.5, 1, 1).endFill();

// Assign the hitArea
container.hitArea = hitArea;
// container.addChild(hitArea);

container.onTick = function() {
    var canvas = container.getStage().canvas;
    container.x = canvas.width / 2;
    container.y = canvas.height / 2;
    container.scaleX = canvas.width;
    container.scaleY = canvas.height;
};
container.onPress = function() {
    alert("Eureka!");
};

// Run the simulation
updater = {
    tick: function() { stage.update(); }
};
createjs.Ticker.addListener(updater);
​

如果我将 hitArea 形状添加为容器对象的子对象，则单击事件可以正常工作。