La longueur d'une chaîne de caractères en pixels

Je suis remplissage d'une dropDownList avec type arraycollection de chaînes de caractères. Je veux que la largeur de la liste de contrôle pour correspondre à la taille (en pixels) de la chaîne la plus longue dans le tableau de la collection. Le problème que je me pose est: la largeur de police des chaînes dans la collection sont différents, par exemple " W " semble plus large que 'l'. J'ai donc estimé la largeur d'un caractère à 8 pixels, mais ce n'est pas assez soignée. Si une chaîne qui a beaucoup de 'W' et 'M' est rencontré l'estimation est fausse. Donc, je veux précis de la largeur en pixels de chaînes. Comment puis-je obtenir la longueur exacte d'une chaîne de caractères en pixels??

Ma solution que les estimations de caractère de 8 pixels de large est donnée ci-dessous:

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

Toute idée ou la solution est très appréciée.

Grâce

OriginalL'auteur Rose | 2011-01-07

7

Pour obtenir une mesure plus précise, vous pouvez remplir un Champ de texte avec la chaîne, puis de mesurer la largeur de ce Champ de texte.

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);
}
```
Utilisation:
```
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);
```
Croyez que vous avez besoin pour ajouter un validateNow() appel après assignign la chaîne mais avant de vérifier la textWidth/textHeight la cession de la chaîne de causes de l'invalidation de la taille, mais le re-calcul de la taille n'est pas synchrone de sorte que vous avez à la force de la validation
Super! J'ai aimé la solution; j'ai un petit problème cependant. Il n'est pas d'obtenir la bonne largeur en pixels. J'ai donné à cette chaîne de caractères dans le tableau. var chaînes:Array = [ "un", "girafe", "foo", "L'objet de type arraycollection ne représente pas toute" ]; Maintenant, il a obtenu le textwidth à 245, mais en fait, la taille était de 276. Si une barre de défilement affiche sur ma liste déroulante. À partir de votre code, j'ai retiré la partie qui a textFormat, donc j'ai fait la measureStr fonction 1 fonction d'argument
Le TextFormat affecte la police (visage et le droit de la famille) qui est utilisé lors de la mesure du texte -- il doit être modifié pour correspondre à celle de la liste déroulante exactement (même si je ne suis pas sûr de ce que c'est). Après la suppression de la textFormat choses, donne-t-il à la bonne longueur? Si oui, je suppose que c'est parce que le texte par défaut le format est le même que ce qui est utilisé dans la liste déroulante.
OK, j'ai couru quelques tests: À la taille 12, Times New Roman, à l'aide de votre échantillon de chaînes, j'ai reçu votre largeur de 245. En utilisant les mêmes chaînes, mais avec un format avec une taille de police 14, je reçois 284. Je ne suis pas sûr de la police de caractères de la liste déroulante, mais il se peut également que certaines marges à prendre en compte.
droit... de la police de match... j'ai reçu votre point. Je pensais que flex va utiliser la même police si je ne suis pas d'indiquer explicitement à l'utilisation d'une police. J'ai pensé qu'il allait utiliser la police par défaut. C'est pourquoi j'ai enlevé le format des pièces. Je vais essayer de formater le champ de texte et de dropDownList et écrire en un instant. Merci.

OriginalL'auteur Cameron
1

Je n'ai pas de modifier priv sur d'autres post, donc je poste ceci comme une réponse distincte, mais de crédit doit aller à Cameron si cela fonctionne:
```
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);
}
```
Si je vois qu'il fait et de ses est édité j'avais supprimer ce pour la propreté.

Désolé pour la poubelle post qui à l'origine était d'essayer de répondre à la question juste fait tellement de tort... de toute façon testé celui-ci et il semble fonctionner. Je l'ai fait en Flex mais vous devriez être capable d'utiliser l'AS3 partie pas de problème, je vient de terminer la zone de texte dans un composant UIComponent pour l'obtenir sur scène, mais en utilisant le autosize semble bien fonctionner:
```
<?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>
```
mais ne classe textField a validateNow() la méthode?? help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/...
Doy! désolé eu devant moi, il y tellement habitués à l'aide validateNow dans ces scénarios... vous êtes très susceptibles de droite comme TextField est un composant Flash pas un Flex one, le système de validation dont je parlais s'applique dans les composants Flex... je l'ai fait avec un champ de texte même si, comme bien croire que vous pouvez avoir besoin de définir automatique de la taille ou quelque chose le long de ces lignes... vais poster une modification ci-dessus dans quelques minutes
Intéressant... Êtes-vous sûr que c'est la autoSize de le faire et non pas le fait que la zone de texte est ajouté à la scène?
Pas franchement positif, je l'ai fait sur le chemin de travail, hier, n'ont pas de temps à essayer de pure as3, je vais lui donner une autre chance aujourd'hui, parfois pure as3, très curieux maintenant de moi-même. Sais juste que je besoin d'autosize pour un preloader textfield à taille droite.
Grâce Shaun & Cameron. J'ai testé votre nouveau code. Elle ne mesure que la taille de la dynamique ajouté composant textField, mais la taille du texte dans le composant textInput est différent (en fait plus grande que la zone de texte) u peut voir cela en élargissant le composant textInput. Le problème est, je crois, le texte est représenté dans des polices différentes dans ces deux composants; mais je n'en suis pas sûr; il s'affiche comme ça pour moi. Pour voir qui utilisent le même code avec des <s:TextInput texte="" modifier="textinput1_changeHandler(event)" width="500"/> Merci.

OriginalL'auteur shaunhusain

C'est une version polie de certains de le code ci-dessus. La comptabilité pour les retours à la ligne (en html (pause et \n) et de détruire la création de l'objet Textfield avec quelques autres optimisations. Espérons que cela est utile.

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

Si vous préférez cela, dans une classe, vérifier dans mon GIT cadre:
https://github.com/charlesclements/as3-tools/blob/master/net/charlesclements/util/text/TextUtil.as

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

Aussi, notre Flash/JS frère Jack Doyle @ GreenSock a certaines choses pratiques à faire avec la manipulation de texte. Bien la peine de le vérifier:http://www.greensock.com/splittext/

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.