从中心缩放文本

Posted 2023-03-05

【中文标题】从中心缩放文本

【英文标题】：Scale Text from it's Center

【发布时间】：2019-02-27 09:36:29

【问题描述】：

我对 Canvas 和easeljs 非常陌生，我正在尝试让文本从它的中心按比例缩小。 我能够在 Canvas 上正确居中文本，但我不确定如何处理 Tween 中的缩放。

我很确定我需要设置 regx/regy，但我不确定我应该在哪里设置以及设置什么。

我在这里做了一个没有任何 regx/regy 设置的快速 jsfiddle，你可以从左上角看到文本缩放。 https://jsfiddle.net/1woLdrqt/10/

如果有人能指出我正确的方向，我将永远感激不尽！

谢谢！！

<canvas id="canvas" style="display: block; background-color: #123; width: 300px; height: 200px;"  ></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);
);

【参考方案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)

【参考方案2】：

进一步回答@Konrad，您可以将“textAlign”设置为“center”。这很方便，因为如果您更改文本，它将从中心水平流出，而不是从左侧流出。垂直文本对齐没有等效项（textBaseline 不太一样），所以 bounds/regY 方法也很好。

【讨论】：

嗨@Lanny！ textAlign center 会很有帮助。嗨@兰尼！ textAlign center 会很有帮助。我补充说： text.textAlign = "center";并且文本现在居中，但文本现在向左移动。你能告诉我我应该如何设定界限吗？非常感谢！

请注意，bounds 是从中心点偏移的矩形。对齐边界宽度假定内容在左侧对齐。添加 bounds.x 应该可以解决这个问题！

这是一个带有居中文本 + 边界检查的演示：jsfiddle.net/atxk65v7 - 老实说，它与仅使用边界的结果基本相同，但如果您知道您只是使用居中文本，您可以设置regX/regY 一次，然后将文本更改为您心中的内容。