在createjs中textAlign居中导致命中区域错位

Question

当我将文本设置为link，设置边界形状，并将点击区域设置为边界形状时，如果textAlign = 'center'，我的点击区域是关闭的。有什么想法吗？

var linkColor = "#0000ff";
var linkFont = "bold 14px Times";

var presentationLink = new createjs.Text("View Presentation", linkFont, linkColor);
presentationLink.textAlign = "left";
presentationLink.maxWidth = 170;
presentationLink.x = 300;
presentationLink.y = 125;
stage.addChild(presentationLink);

var plBounds = presentationLink.getTransformedBounds();

var s = new createjs.Shape().set({ x: plBounds.x, y: plBounds.y + plBounds.height });
s.graphics.s(linkColor).moveTo(0, 0).lineTo(plBounds.width, 0);
stage.addChild(s);

var hitAreaForPLink = new createjs.Shape(new createjs.Graphics().beginFill("#ffffff").drawRect(-10, -10, plBounds.width + 20, plBounds.height + 10));
presentationLink.hitArea = hitAreaForPLink;

stage.enableMouseOver();

presentationLink.on("mouseover", function () {
    presentationLink.cursor = "pointer";
});

Answer 1

hitArea根据其所有者的坐标系定位。也就是说，所有者的所有转换都应用于 hitArea。这样一来，如果您要为所有者设置动画，hitArea 会按预期跟踪它。

由于转换已经应用，您需要使用 getBounds，而不是 getTransformedBounds。看这个例子：http://jsfiddle.net/gskinner/uagv5t84/2/

在createjs中textAlign居中导致命中区域错位

In createjs textAlign Center Causing hit area misalignment

text

createjs