Länge eines Strings in Pixel

Ich bin das Auffüllen einer dropDownList mit arrayCollection von strings. Ich möchte die Breite der Dropdown-Liste-Steuerelement in übereinstimmung mit der Größe (in Pixel) des längsten Strings im array Sammlung. Das problem, das ich bin vor ist: die schriftart, die Breite des strings in der Sammlung sind verschiedene, z.B. " W " sieht breiter als 'l'. So habe ich geschätzt, dass die Breite eines Zeichens von 8 Pixel, aber das ist nicht das, Recht ordentlich. Wenn Sie eine Zeichenfolge, die hat viele 'W' und 'M' hat die Schätzung falsch ist. Also ich möchte die genaue Pixelbreite des strings. Wie bekomme ich die exakte Länge eines Strings in Pixel??

Meine Lösung, die Schätzungen alle Zeichen werden 8 Pixel breit ist unten angegeben:

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);
   }

Jede Idee oder Lösung sehr geschätzt.

Dank

InformationsquelleAutor Rose | 2011-01-07

7

Erhalten Sie eine genauere Messung, können Sie füllen Sie ein Textfeld mit dem string, dann Messen Sie die Breite des TextField text.

Code:
```
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);
}
```
Verwendung:
```
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);
```
- Glauben müssen Sie einen validateNow () - Aufruf nach assignign der string aber vor der überprüfung der textWidth/textHeight die Zuordnung der Zeichenfolge bewirkt, dass Invalidierung der Größe, aber die neu-Berechnung der Größe ist nicht synchron, so dass Sie erzwingen, dass die Validierung
- Super!!! Ich mochte die Lösung; ich habe ein kleines problem obwohl. Es ist nicht immer die richtige Breite in pixel. Ich gab es diese Zeichenfolge in das array. var strings:Array = [ "a", "giraffe", "foo", "Die ArrayCollection-Objekt stellt keine" ]; Jetzt wurde es dem textwidth werden 245 aber in der Tat war die Größe 276. So eine scroll-Leiste zeigt auf meine drop-down-Liste. Aus deinem code habe ich entfernt, das Teil, das hat textFormat, also habe ich die measureStr Funktion eine 1-argument-Funktion
- Die TextFormat-wirkt sich auf die Schrift (-Gesicht-und -Familie, die verwendet wird, wenn die Messung des Textes-es sollte entsprechend geändert werden, dass der drop-down-Liste genau (obwohl ich nicht sicher bin was das ist). Nach dem entfernen der textFormat-Zeug, gibt er die richtige Länge? Wenn dem so ist, ich vermute, es ist, weil die Standard-text-format ist das gleiche wie das, was verwendet wird in der drop-down-Liste.
- OK, ich lief einige tests: Bei Größe 12, Times New Roman, die mithilfe Ihrer Probe Streicher, ich habe Ihre Breite von 245. Unter Nutzung des gleichen strings, aber mit einem format mit Schriftgröße 14, ich bekomme 284. Ich bin nicht sicher, dass die schriftart in der Dropdown-Liste verwenden, aber es kann auch einige Ränder zu berücksichtigen.
- richtig... die schriftart sollte passen... ich bekam Ihren Punkt. Ich dachte, dass flex verwenden Sie die gleiche schriftart, wenn ich nicht explizit sagen, es eine schriftart verwenden. Ich dachte, es war die Standard-schriftart. Deshalb habe ich Sie entfernt das format teilen. Ich werde versuchen, formatieren Sie das Textfeld und dropDownList-und write-back in a moment. Danke.
- Ich habe versucht es ohne die FontFormat als gut, und es ergibt die gleiche Breite wie Times New Roman, Schriftgröße 12 -- also ich vermute dies ist der Standard für Textfelder (aber wie du sagst, der dropDownList könnte anders sein). In jedem Fall, das wird nur erhalten Sie die Größe des Textes (ohne Rand) - ich denke, es ist wahrscheinlich, dass Sie müssen hinzufügen, ein bisschen zu kompensieren und die Margen in der dropDownList
- Das ist die Lösung. Das problem war die Schrift nicht überein. Die textField-und das dropDownList-Komponenten wurden mit verschiedenen fonts (so dass die Messung anders war). So habe ich Arial 12 für die textField-Instanz (=die schriftart von der dropDownList)und für den Rand habe ich 10 Pixel, damit es passt. Sehr saubere Lösung Cameron. Ich möchte meine Dankbarkeit Shaun auch für seine Bemühungen und tolle Kommentare.
- Froh, dass es funktioniert! Ich werde Sie entfernen den Teil, der sagt "ungetestet" 😉
- Hi @Cameron war dies die Antwort, die ich suchte, und ich danke Ihnen für den Austausch. Aber ich habe noch eine Anforderung, die Sprache ändern. Also dein code funktioniert auf verschiedene text-Formate, wenn die Sprache Englisch ist. Gibt es eine andere Möglichkeit, dass dies funktionieren sollte, die für andere Sprachen wie s, Chinesisch, etc
- Hmm, ich bin mir nicht sicher, warum es würde nicht funktionieren, für nicht-ASCII-Zeichen,... wenn Sie eine Lösung finden, poste es bitte als Antwort!
- seine sehr schwer zu finden Sie die Lösung... es ist ok, wenn ich fand keine Antwort dann werde ich teilen. Aber um meine Zeit zu sparen bitte, sollten Sie versuchen, für einige Zeit. vielen Dank für die Antwort.
- Ich schlage vor, Sie sparen sich die Zeit und finden Sie Ihre eigene Lösung-ich habe andere Dinge zu mir selbst zu tun, sorry.
- das ist auch ok so . ich werde es versuchen. danke
InformationsquelleAutor Cameron
1

Habe ich nicht Bearbeiten priv auf anderer Leute post also ich bin dieses posting, als eine separate Antwort, aber Kredit gehen sollten, um Cameron, ob das funktioniert:
```
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);
}
```
Wenn ich sehe, dass es funktioniert und seine bearbeitet wird, würde ich diesen hier löschen für Sauberkeit.

Sorry für den Müll, die post war zunächst versuchen, die Frage zu beantworten, habe gerade so falsch... jedenfalls getestet und es scheint zu funktionieren. Ich Tat dies in Flex aber Sie sollten in der Lage sein, nur die AS3-Teil kein problem, das ich gerade eingepackt die textfield-Objekt in eine UIComponent, um es auf die Bühne, sondern die autosize-scheint gut zu funktionieren:
```
<?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>
        
    </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>
```
- aber nicht textField-Klasse hat validateNow () - Methode?? help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/...
- Doy! sorry hab vor mich dort so verwendet werden, um mit validateNow in diesen Szenarien... du hast sehr wahrscheinlich Recht, da TextField ist eine Flash-Komponente nicht eine Flex ein, das validierungsschema ich Rede gilt in den Flex-Komponenten... ich habe das getan mit einem text-Feld, aber auch glaube, dass müssen Sie möglicherweise die Option " auto-Größe oder etwas entlang jenen Linien... post wird ein edit oben in ein paar Minuten
- Interessant... Bist du sicher, dass es die autoSize es zu tun und nicht die Tatsache, dass die textbox Hinzugefügt wird, auf die Bühne?
- Ehrlich gesagt nicht nur positiv, ich habe diese auf dem Weg von der Arbeit gestern keine Zeit hatte, um zu versuchen, Reine as3-ich gebe es einen weiteren Schuss heute irgendwann rein as3, sehr neugierig, mich jetzt. Weiß nur, ich brauchte autosize für einen preloader textfield die Größe Recht.
- Dank Shaun & Cameron. Getestet habe ich den neuen code. Es misst nur die Größe der dynamisch Hinzugefügt textField-Komponente, sondern die Größe der text in der textInput-ist anders (größer als die textField) u sehen können diese durch vergrößern der textInput-Komponente an. Das problem ist, ich denke, der text ist vertreten in verschiedenen Schriftarten, in denen zwei Komponenten; aber ich bin mir nicht sicher; es scheint, wie mir. Zu sehen, dass verwenden Sie den gleichen code mit <s:TextInput text="" change="textinput1_changeHandler(event)" width="500"/> vielen Dank.
- Danke shaun, das problem war die Schrift Diskrepanz zwischen den beiden Komponenten. Ich habe ein ausführliches Kommentar auf den ersten post.
InformationsquelleAutor shaunhusain

Dies ist eine mehr Polierte version einige der oben genannten code. Rechnungswesen für Zeilenumbrüche (html break und \n) und der Annullierung des Textfield-Objekt erstellt, mit einigen anderen Optimierungen. Hoffe, das ist hilfreich.

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 );

Wenn Sie es vorziehen diese in eine Klasse, check it out in meinem GIT-framework:
https://github.com/charlesclements/as3-tools/blob/master/net/charlesclements/util/text/TextUtil.as

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

Auch unser Flash/JS Bruder Jack Doyle @ GreenSock hat einige praktische Dinge zu tun, die Manipulation von text. Es lohnt sich, check it out:http://www.greensock.com/splittext/

InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.