Question

I have a rectangle on which I would like to display a label. I have tried to do this by creating a rectangle sprite, and then adding a textField to the display tree of the sprite.

The problem is that there seems to be a lot of extra blank padding surrounding the textField. Although the text fits within the box, the boundaries of the textField extend beyond the visible region of it’s containing rectangle. This causes the rectangle’s width and height to change also.

The issue is that I want the user to be able to drag the rectangle around the screen. I added an event listener on MOUSE_DOWN to initiate the drag. However, the user can start the drag by clicking on the area surrounding the visible rectangle, rather than only on the rectangle itself. I assume this is because the user will actually be clicking on the extra blank space coming from the the TextField and seeping out over the edges

Any ideas?

Answer 1

I think what you’re looking for is the textField.autoSize parameter. It makes the text field bounds shrink to the size of the text (otherwise it has a default height/width regardless of the text it contains)

import flash.text.TextField;
import flash.text.TextFieldAutoSize;

var textField:TextField = new TextField();

textField.autoSize = TextFieldAutoSize.LEFT;
textField.text = "your text"; //set this AFTER autoSize

You can also set the width of the your textField to the width of your rectangle. Or forgo the autosize property and manually set the height/width of your text box to the height/width of the rectangle, though this would truncate any text that doesn’t fit.

There is always some padding on the text field. Getting the exact bounds of the actual text can be tricky (though it is possible). An easier way is to just mask your text box.

If your rectangle is drawn with the graphics class, you could do this:

var rectangle:Sprite = new Sprite();
rectangle.graphics.beginFill(0xFF0000);
rectangle.graphics.drawRect(0,0,100,100);
addChild(rectangle);

var myMask:Shape = new Shape();
myMask.graphics.copyFrom(rectangle.graphics);
rectangle.addChild(myMask);

var textField:TextField = new TextField();
textField.width = rectangle.width;
textField.height = rectangle.height;
textField.mask = myMask;

rectangle.addChild(textField);

One other option you could do, is in your event listener, check to see if the target is the text box and exit the function. (just make sure your text field’s mouseEnabled property is true (default) if you use this method)

function rectangleClickHandler(e:Event):void {
    if(e.target == myTextField) return;
    //rest of your code
}