Untitled Document

AS 3: TextField.getCharBoundaries()

This new feature is definitely one that many users had been looking forward to for ages. It returns a rectangle that is the bounding box of a character.

How to use it?

Syntax:

public function getCharBoundaries(charIndex:int):Rectangle 

First you have to get the position of a character in a string. e.g. "FLASH", then "F" corresponds to 0, "L" corresponds to 1, etc. This is the parameter charIndex. You will get back the rectangle that bound the character at the location charIndex.

Read livedocs for more details.

Here's an example. Search for sth and the match will be highlighted. The yellow highlighting patch is drawn by the drawing API. Get the source here.

However there are some limitations or skills in using this new method....

Limitations

It can only search for a single character but not a string.
The position of the bounding rectangle is not very exact.
Not work well if the string is split into 2 lines.

To solve the first problem, you can get the rectangle of the first and the last character of the string you want, then you can calculate the length of the string. So the code will be sth like this:

var rect1:Rectangle = TextField.getCharBoundaries(firstCharIndex);
    var rect2:Rectangle = TextField.getCharBoundaries(firstCharIndex+StringYouWant.length-1);
// The rectangle that bound the string you want
var rect3:Rectangle = new Rectangle(rect1.x,rect1.y,rect2.x+rect2.width-rect1.x,rect1.height); 

For the 2nd problem, the rectangle has about 2px of deviation from the exact location (i.e. it cannot cover the whole string completely). It would not be neat to have a little part of the string not covered by the yellow rectangle in the above example. I think this is probably due to the 2 px gutters of textfield.

Therefore to correct this in my example, I add 2 to the x,y coordinate of rect3 (as follows).

yellowRectangle.graphics.drawRect(rect3.x+2,rect3.y+2,rect3.width,rect3.height); 

Back to the Tutorial index page