2009-08-03 10 views
4

Est-ce que quelqu'un sait comment créer un champ de texte dynamique avec une bordure visible et des coins arrondis dans AS3?Zone de texte arrondie AS3

Je pense que je pourrais avoir à créer un MovieClip arrondi, redimensionner et le placer derrière le texte.

J'ai essayé ceci, mais je ne vois aucun changement.

var styleRound:StyleSheet = new StyleSheet(); 
styleRound.parseCSS("h4{cornerRadius:10;borderStyle: solid; borderThickness: 1;}"); 
tf.htmlText = "<h4>" + hotspotData.caption + "</h4>"; 
tf.styleSheet = styleRound; 
+0

utiliser la balise actionscript-3. Vous obtiendrez plus de vues. : D –

+0

Merci! Bonne pensée – Bryan

Répondre

8

Voici la liste des available CSS styles for TextFields in ActionScript 3. Désolé, il n'y a pas de rayon de coin.

Vous pouvez activer une bordure pour un champ de texte sur les objets TextField border property. Mais il n'y a pas une propriété disponible pour arrondir le coin.

Je vous suggère de créer un nouveau composant et d'ajouter vous-même la bordure en tant que Sprite sous TextField. Quelque chose comme:

package 
{ 

import flash.display.Graphics; 
import flash.display.Sprite; 
import flash.text.TextField; 
import flash.text.TextFieldAutoSize; 

public class TextBorder extends Sprite 
{ 
    private static const CORNER_RADIUS:int = 5; 
    // display objects 
    private var background:Sprite; 
    private var field:TextField; 

    // properties 
    private var _text:String; 

    public function TextBorder() 
    { 
     background = new Sprite; 
     field = new TextField; 
     field.autoSize = TextFieldAutoSize.LEFT; 

     addChild(background); 
     addChild(field); 

     // TESTING: 
     text = "Hello World"; 
    } 

    public function set text(newText:String):void 
    { 
     _text = newText; 
     display(); 
    } 

    public function get text():String 
    { 
     return _text; 
    } 

    private function display():void 
    { 
     field.text = _text; 

     var g:Graphics = background.graphics; 
     g.clear(); 
     g.lineStyle(0, 0x0); 
     g.beginFill(0xFFFFFF); 
     g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS); 
    } 
} 

} 
+0

bonne solution, mais vous avez oublié le g.clear() dans l'affichage ... – back2dos

+0

Merci pour le conseil - seulement testé une fois. J'ai mis à jour l'extrait de code avec votre correction. FWIW: Ceci est * pas * code prêt à la production;) –

0

Pouvez-vous simplement utiliser les styles CSS? Quelque chose comme:

TextInput { 
    borderStyle: solid; 
    borderThickness: 1; 
    cornerRadius: 2; 
} 

Je n'ai pas testé cela, mais cela devrait vous donner un angle arrondi.

+0

Merci. J'ai modifié la question pour inclure ce que j'ai changé, mais cela ne fonctionne toujours pas. – Bryan

+0

Ces propriétés ne sont pas valides CSS pour AS3. Voici une liste des propriétés disponibles: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html –

0

J'ai fini par créer un rectangle arrondi dans Flash et l'exporter comme sa propre classe - hotspotBG.

var hotspotBackground:hotspotBG = new hotspotBG(); 
hotspotBackground.width = textField.width + 10; 
caption.addChild(hotspotBackground); 
0

Vous ne pouvez pas modifier le champ de texte lui-même, à partir de 2014 flash ne le permet pas.

Ce que vous pouvez faire est de supprimer l'arrière-plan et les frontières, qui laissera le champ de texte complètement transparent, puis ajoutez une image (outil rectangle est la meilleure façon de le faire) à l'arrière du champ de texte, de sorte que le champ de texte soit sur le dessus de l'image (axe des z)

Ce n'est peut-être pas ce que vous pensiez, mais ça marche!

//you are deleting the background and the borders //and replacing them with an image textbox.background=false; textbox.border=false;