creating dynamic rectangle

I'm wondering how I can create a dynamic rectangle which 开发者_StackOverflow社区has some text in it, the text is dynamic so the rectangle has to adapt to the length of the text. Any ideas on how to approach this?

here is a basic one for single line text:

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

var rectClip:Sprite = new Sprite();

var rect:Sprite = new Sprite;
rect.graphics.beginFill(0xff0000, 1);
rect.graphics.drawRect(0, 0, 100, 100);
rect.graphics.endFill();

var tf:TextField = new TextField();
tf.autoSize = "left";
tf.text = "Lorem ipsum dolor sit amet...";

addChild(rectClip);
rectClip.addChild(rect);
rectClip.addChild(tf);

rect.width = tf.textWidth + 12;
rect.height = tf.textHeight + 12;
tf.x = Math.round(rect.width/2 - tf.width/2);
tf.y = Math.round(rect.height/2 - tf.height/2);

Rob

Another way if you want to draw your rectangle in Flash instead of actionscript (although the above way might be more useful).

Create a layer with a rectangle.

Make the rectangle some sort of graphic or sprite and set it to 9-slice scaling. This way the rectangle will scale properly with the textbox (good if it's a rounded rectangle)

Also choose Linkage for the rectangle and give it a class name (say, "Background")

public var textBackground:Background; // can make public or private depending if you leave it on the stage or generate it
private var myTextField:TextField;

Then have two functions:

private function createTextField():void
{
// create your textfield here using actionscript
myTextField = new TextField();
// customize your textfield
}

private function createTextBackground():void
{
        textBackground = new Background;
        textBackground.height = myTextField.height + 20;
}

Then:

createTextField();
createTextBackground();
addChild(textBackground);
addChild(myTextField);

I usually change the height depending on the text and set the width to a fixed width and set my positioning how I like.

If the TextField is multiline, you will need to set a fixed width , you can then determine the TextField height after it's been formatted.

   private var format:TextFormat = new TextFormat();
   private var textWidth:int = 300;
   private var hPadding:int = 10;
   private var vPadding:int = 10;
   private var boxColor:uint = 0x990000;

   private function init():void
   {
      var tf:TextField = getTextField("Your text..........etc...");
      tf.x = hPadding;
      tf.y = vPadding;

      var rectWidth:int = textWidth + ( hPadding * 2);
      var rectHeight:int = tf.textHeight + ( vPadding * 2);

      var container:Sprite = getTextContainer( rectWidth , rectHeight );
      container.addChild( tf );

   }

   private function getTextField( text:String ):TextField
   {
       var tf:TextField = new TextField();
       tf.defaultTextFormat = format;
       tf.autoSize = TextFieldAutoSize.LEFT;
       tf.multiline = true;
       tf.width = textWidth;
       tf.text = text;
       // etc...

       return tf;
   }

   private function getTextContainer(width:int , height:int ):Sprite
   {
        var sp:Sprite = new Sprite();

        with( sp.graphics )
        {
             beginFill( boxColor );
             drawRect( 0 , 0 , width , height );
             endFill();
        }

        return sp;
   }