字符串的长度（以像素为单位）

Question

我正在使用字符串的 arrayCollection 填充 dropDownList 。我希望下拉列表控件的宽度与数组集合中最长字符串的大小（以像素为单位）匹配。我面临的问题是：集合中字符串的字体宽度不同，例如“W”看起来比“l”宽。所以我估计字符的宽度为 8 像素，但这不太整洁。如果遇到具有许多“W”和“M”的字符串，则估计是错误的。所以我想要字符串的精确像素宽度。我怎样才能得到字符串的确切长度（以像素为单位）？

我的解决方案将所有字符估计为 8 像素宽，如下所示：

public function populateDropDownList():void{
    var array:Array = new Array("o","two","three four five six seven eight wwww");
    var sampleArrayCollection:ArrayCollection = new ArrayCollection(array);
    var customDropDownList:DropDownList = new DropDownList();
    customDropDownList.dataProvider=sampleArrayCollection;
    customDropDownList.prompt="Select ...";
    customDropDownList.labelField="Answer Options:";
    //calculating the max width
    var componentWidth=10; //default
    for each(var answerText in array){
     Alert.show("Txt size: "+ answerText.length + " pixels: " + answerText.length*9); 
     if(answerText.length * 8 > componentWidth){
      componentWidth=answerText.length * 8;
     }
    }
    customDropDownList.width=componentWidth;
    answers.addChild(customDropDownList);
   }

任何想法或解决方案都非常有价值。

谢谢

Answer 1

为了获得更准确的测量结果，您可以使用字符串填充 TextField，然后测量该 TextField 文本的宽度。

代码：

function measureString(str:String, format:TextFormat):Rectangle {
    var textField:TextField = new TextField();
    textField.defaultTextFormat = format;
    textField.text = str;

    return new Rectangle(0, 0, textField.textWidth, textField.textHeight);
}

用法：

var format:TextFormat = new TextFormat();
format.font = "Times New Roman";
format.size = 16;

var strings:Array = [ "a", "giraffe", "foo", "!" ];

var calculatedWidth:Number = 50;    // Set this to minimum width to start with

for each (var str:String in strings) {
    var stringWidth:Number = measureString(str, format).width;
    if (stringWidth > calculatedWidth) {
        calculatedWidth = stringWidth;
    }
}

trace(calculatedWidth);

Answer 2

我对其他人的帖子没有编辑权限，所以我将其作为单独的答案发布，但如果这有效，功劳应该归于卡梅伦：

function measureString(str:String, format:TextFormat):Rectangle {
    var textField:TextField = new TextField();
    textField.autoSize = TextFieldAutoSize.LEFT;
    textField.defaultTextFormat = format;
    textField.text = str;

    return new Rectangle(0, 0, textField.textWidth, textField.textHeight);
}

如果我看到它确实有效并且他的帖子被编辑了，我会删除这个以保持清洁。

抱歉，垃圾帖子最初是试图回答这个问题，只是错误地回答了...无论如何测试了这个，它似乎有效。我在 Flex 中做到了这一点，但你应该能够使用 AS3 部分，没问题，我只是将文本字段包装在 UIComponent 中以将其放在舞台上，但使用自动调整大小似乎工作正常：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            protected function textinput1_changeHandler(event:TextOperationEvent):void
            {
                // TODO Auto-generated method stub

                var rect:Rectangle = measureString(event.target.text);
                holderBox.graphics.clear();
                holderBox.graphics.beginFill(0xFF0000);
                holderBox.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
            }

            private function measureString(str:String):Rectangle {
                var textField:TextField = new TextField();
                textField.autoSize = TextFieldAutoSize.LEFT;
                textField.text = str;
                var uiComponent:UIComponent = new UIComponent();
                uiComponent.addChild(textField);
                holderBox.addChild(uiComponent);

                return new Rectangle(0, 0, textField.textWidth, textField.textHeight);
            }

        ]]>
    </fx:Script>
    <mx:VBox>
        <s:TextInput text="" change="textinput1_changeHandler(event)"/>
        <mx:Box id="holderBox"/>
    </mx:VBox>
</s:Application>

Answer 3

这是上面一些代码的更精致的版本。考虑换行符（html 中断和 \n）并通过其他一些优化使创建的 Textfield 对象无效。希望这有帮助。

function measureString(str:String, font:String="Times New Roman", size:Number=12):Rectangle 
{
    var textField:TextField = new TextField();
    textField.defaultTextFormat = new TextFormat( font, size );
    textField.border = true;
    textField.multiline = true;
    textField.autoSize = TextFieldAutoSize.LEFT;
    textField.htmlText = str;
    // Grab with and height before nullifying Textfield.
    var w:Number = textField.textWidth;
    var h:Number = textField.textHeight;
    //addChild( textField );// This will add the Textfield to the stage so you can visibly see it.
    //if( contains( textField ) ) removeChild( textField );// If it exists onstage, remove it.
    textField = null;//nullify it to make it available for garbage collection.
    return new Rectangle(0, 0, w, h);
}

var str:String = "Jeremy is a good boy.<br>He also has a red bike. \nSometimes Jeremy rides his bike to the store to buy bread for his family.<br>He likes wholewheat.";
trace( measureString( str, "Times New Roman", 25 ).width );

如果你更喜欢在课堂上这样做，请在我的 GIT 框架中查看：
https://github.com/charlesclements /as3-tools/blob/master/net/charlesclements/util/text/TextUtil.as

AS3-tools：https://github.com/charlesclements/as3-tools

另外，我们的 Flash/JS 兄弟 Jack Doyle @ GreenSock 有一些与操作文本有关的方便的东西。非常值得一看：http://www.greensock.com/splittext/

Answer 4

这是我为 Java 编写的例程。我想你可以将它转换为 Javascript 或其他什么。

它并不准确，但给出了一个大概的答案。假设一个空间的宽度约为200，M和W的宽度约为1000。显然，您需要根据您的特定字体大小进行缩放。

static int picaSize(String s)
{
    // the following characters are sorted by width in Arial font
    String lookup = " .:,;'^`!|jl/\\i-()JfIt[]?{}sr*a\"ce_gFzLxkP+0123456789<=>~qvy$SbduEphonTBCXY#VRKZN%GUAHD@OQ&wmMW";
    int result = 0;
    for (int i = 0; i < s.length(); ++i)
    {
        int c = lookup.indexOf(s.charAt(i));
        result += (c < 0 ? 60 : c) * 7 + 200;
    }
    return result;
}