Масштабировать текст из его центра - PullRequest
Новая
       51

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

0 голосов
/ 23 сентября 2018

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

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

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

0 голосов
/ 23 сентября 2018

Ваша мысль верна.Установка 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)
...