如何将 TextField 与末尾的空格居中？

Posted 2023-02-16

【中文标题】如何将 TextField 与末尾的空格居中？

【英文标题】：How to center a TextField with spaces at the end?

【发布时间】：2016-04-09 13:12:33

【问题描述】：

我有一个应用程序，其中一些文本从 TextField 的中心一次扩展一个字母。只要没有空格，它就可以正常工作，但是一旦在字符串中达到空格，它就会被忽略，直到达到非空格，此时文本在 TextField 中居中。

myText 是舞台上的一个 TextField，其默认对齐方式为居中文本。

// Write the words
var charBetweenWords:String = " ";
var whatToWrite:String = "THERE ARE 200 BARRELS OF OIL IN ONE TANKER TRUCK";
whatToWrite = whatToWrite.split(" ").join(charBetweenWords);
var wordTimer:Timer = new Timer(100, 1);
wordTimer.addEventListener(TimerEvent.TIMER_COMPLETE, wordHandler);
function wordHandler(e:TimerEvent)

    if (whatToWrite.length > 0)
    
        myText.appendText(whatToWrite.substr(0, 1));
        whatToWrite = whatToWrite.substr(1);
        wordTimer = new Timer(5, 1);
        wordTimer.addEventListener(TimerEvent.TIMER_COMPLETE, wordHandler);
        wordTimer.start();
    
    else
    
        // Done
    

wordTimer.start();

我考虑过用非空格（但仍然是空格）字符（如 /u0020）替换空格，但我使用的字体似乎不支持这一点。当我这样做时，根本不会出现空格（但whatToWrite 的痕迹会在单词之间返回框）。

考虑到末尾的空格，Flash IDE 不会将文本居中。 myText 放置在 Flash IDE 中，未在代码中初始化。

我能做些什么来完成这项工作？

【问题讨论】：

顺便说一句，您只需要创建一个计时器。

我已经转载了这个。一个有趣的问题。

对吗？是的，我只需要一个计时器 - 好点。 :P

【参考方案1】：

更好的方法是创建一个自定义类并使用带有滑入的完整文本字段的屏蔽。当文本字段滑入时，您可以扩展自定义类的大小，您将获得更平滑的结果。但无论如何，您可以使用 TextLineMetrics 类获得非常精确的结果，该类提供有关文本中所有字符的大量信息。更简单的方法是获取字符的边界：

import flash.geom.Rectangle;

var whatToWrite:String = "THERE ARE 200 BARRELS OF OIL IN ONE TANKER TRUCK";
var wordTimer:Timer = new Timer(25);
wordTimer.addEventListener(TimerEvent.TIMER, wordHandler);
wordTimer.start();
var textWidth:Number = 0;
function wordHandler(e:TimerEvent)

    if (whatToWrite.length)
    
        myText.appendText(whatToWrite.substr(0, 1));
        var rect:Rectangle = myText.getCharBoundaries(myText.text.length - 1)       
        textWidth += rect.width;        
        myText.width = textWidth + 5//compensate for rect with + 5
        whatToWrite = whatToWrite.substr(1);
        myText.x = stage.stageWidth / 2 - myText.width / 2
    
    else
    
        wordTimer.stop();
    

【参考方案2】：

也许有更好的方法（如果有人找到更好的方法那就太好了），但现在，这是我想出的解决方案/hack：（仅单行）

var whatToWrite:String = "THERE ARE 200 BARRELS OF OIL IN ONE TANKER TRUCK";    
var wordTimer:Timer = new Timer(100, 1);
wordTimer.addEventListener(TimerEvent.TIMER, wordHandler);

//set the the auto size to left so the width matches the text width
myText.autoSize = TextFieldAutoSize.LEFT;

function wordHandler(e:TimerEvent)

    if (whatToWrite.length > 0)
        //if the new character to add is a space, replace it with an underscore
        var newChar:String = whatToWrite.substr(0, 1);
        var charToAdd = newChar == " " ? "_" : newChar;
        myText.appendText(charToAdd);

        whatToWrite = whatToWrite.substr(1);

        wordTimer.reset();
        wordTimer.delay = 150;
        wordTimer.start();

        //center the text field manually
        myText.x = (stage.stageWidth - myText.width) * 0.5;

        //if it was originally a space, take off the underscore and make it a space again.
        if(newChar == " ") myText.text = myText.text.substring(0,myText.text.length-1) + " ";

    
    else
    
        // Done
    


wordTimer.start();

如果您需要多行，则必须以编程方式将每一行拆分为自己的文本字段。

【讨论】：

谢谢，这行得通。希望它适用于多行，但就像你说的那样，我将不得不以编程方式将文本逐行拆分。我……没关系。

使用 TextLineMetrics 可以处理多行。最好的方法仍然是创建一个自定义类。