Длина строки в пикселях

Question

Я заполняю dropDownList с помощью arrayCollection строк.Я хочу, чтобы ширина раскрывающегося списка соответствовала размеру (в пикселях) самой длинной строки в коллекции массивов.Проблема, с которой я сталкиваюсь, такова: ширина шрифта строк в коллекции различна, например, «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

Чтобы получить более точное измерение, можно заполнить текстовое поле строкой, а затем измерить ширину текста этого текстового поля.

Код:

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

Я не редактирую priv на постах других людей, поэтому я публикую это как отдельный ответ, но кредит должен перейти к Камерону, если это сработает:

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 break и \ 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 Джека Дойла @ GreenSock есть несколько полезных вещей для манипулирования текстом.Стоит проверить это: http://www.greensock.com/splittext/