我对 Canvas 和easeljs 很陌生,我正试图让文本从它的中心按比例缩小。我能够在画布上正确居中文本,但我不确定如何处理 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);
});