Question

我一直在测试hitarea。似乎hitarea与父元素缩放或移动没有任何关系。基本上你可以从这个小提琴中进行测试：http://jsfiddle.net/7rchubyd/4/。

是否有一些我没有考虑到的事情，或者有没有人对如何实施这个有很好的建议？

有问题的jsfiddle代码：

var c = document.getElementById("can");
var stage = new createjs.Stage(c);

var shape = new createjs.Shape();
shape.graphics.beginFill("#666666")
    .drawPolyStar(50, 50, 50, 6, 0, 30);

var shapeHitArea = new createjs.Shape();
shapeHitArea.graphics.beginFill("#FF0000")
    .drawPolyStar(50, 50, 50, 6, 0, 30);

shape.hitArea = shapeHitArea;

stage.addChild(shape);

stage.addEventListener("stagemousedown", function (e) {
    stage.addEventListener("stagemousemove", mouseMoveCB);
});

stage.addEventListener("stagemouseup", function (e) {
    stage.removeEventListener("stagemousemove", mouseMoveCB);
    var objects = stage.getObjectsUnderPoint(e.stageX, e.stageY);
    document.getElementById("objectCount").innerHTML = objects.length;
});

stage.update();

document.getElementById("scale").addEventListener("click", function() { 
    stage.scaleX *= 1.5;
    stage.scaleY *= 1.5;
    stage.update();
});

function mouseMoveCB(e) {
    stage.x = e.stageX;
    stage.y = e.stageY;
    stage.update();
}

Answer 1

This looks like it is a bug specifically with scaling the stage. I'll file a bug for this on the GitHub repo.

To work around it, just apply your transformations to the instance directly shape.scaleX = 2;: http://jsfiddle.net/1bc396d5/

Or, move your items into a Container and apply transformations to it instead of the stage: http://jsfiddle.net/1bc396d5/1/

displayObject.hitArea与其所有者

1 个答案: