Масштабировать текст из его центра

Question

Я очень плохо знаком с 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);
});

Answer 1

Ваша мысль верна. настройка regX а также regY это лучший подход к решению проблемы. Документация EaselJS четко определяет эти свойства. Как показано в примерах, приведенных в их описаниях, вы хотите, чтобы они были установлены на 50% ширины текста (regX) и высота (regY) размеры.

Вот реализация вышеупомянутого в вашем коде ( 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)

Answer 2

В дополнение к ответу @Konrad, вы можете установить "textAlign" на "center". Это удобно, потому что если вы измените текст, он будет вытекать из центра по горизонтали, а не слева. Не существует эквивалента для вертикального выравнивания текста (textBaseline не совсем то же самое), поэтому подход bounds/regY также хорош.