我是Canvas和easyljs的新手,我正试图从其中心放大文本。 我能够在“画布”上正确地使文本居中,但是我不确定如何在Tween中处理缩放。
我很确定我需要设置regx / regy,但是我不确定应该将其设置为什么位置和位置。
我在这里做了一个快速的jsfiddle,没有任何regx / regy设置,您可以从左上角看到文本比例。 https://jsfiddle.net/1woLdrqt/10/
如果有人能指出我正确的方向,我将永远感激!!
谢谢!
<canvas id="canvas" style="display: block; background-color: #123; width: 300px; height: 200px;" width="300" height="200"></canvas>
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
var text = new createjs.Text("hello", "900 36px Ariel", "#fff");
text.name = "myText";
var b = text.getBounds();
text.x = ( ($("#canvas").width() / 2) - (b.width / 2) );
text.y = ( ($("#canvas").height() / 2) - (b.height / 2) );
stage.addChild(text);
$("#zoomIn").click(function() {
var x = stage.getChildByName("myText");
var b = x.getBounds();
createjs.Tween.get(x)
.to({
scaleX: 2,
scaleY: 2,
}, 2000);
});
$("#zoomOut").click(function() {
var x = stage.getChildByName("myText");
var b = x.getBounds();
createjs.Tween.get(x)
.to({
scaleX: 1,
scaleY: 1,
}, 2000);
});
答案 0 :(得分:1)
您的想法是正确的。设置regX
和regY
是解决问题的最佳方法。 EaselJS's documentation defines these properties pretty clearly.如描述中提供的示例所示,您希望将它们设置为文本的宽度(regX
)和高度(regY
)尺寸的50%。
以下是您的代码(JsFiddle)中上述内容的实现:
var b = text.getBounds();
text.regX = b.width / 2;
text.regY = b.height / 2;
// We also don't need to correct the initial position anymore as the origin point of the text is now in its center.
text.x = ($("#canvas").width() / 2); // - (b.width / 2)
text.y = ($("#canvas").height() / 2); // - (b.height / 2)
答案 1 :(得分:1)
在@Konrad的答案旁边,您可以将“ textAlign”设置为“ center”。这很方便,因为如果更改文本,它将从水平中心而不是左侧水平流出。垂直文本对齐没有等效的方法(textBaseline不太一样),因此bounds / regY方法也很好。