Character boundaries of text field based on parent

Question

I have a text field inside a container. I'm wondering is it possible to find the boundaries of each character based on the container and not the text field.

Here is a sample screen shot:

And normal state would be like this: With this I can find the bounds of each character based on text field, But I need it based on the container:

var rect:Rectangle = new Rectangle();
for (var i:int = 0; i < textField.length; i++){
    rect = textField.getCharBoundaries(i);
}

Is there anybody whom has an experience on this?

Answer 1

I believe you have to make use of Point conversions.

var rect:Rectangle = new Rectangle();
for (var i:int = 0; i < textField.length; i++){
    rect = textField.getCharBoundaries(i);

    var globalTopLeft:Point = textField.localToGlobal(rect.topLeft);
    var globalBottomRight:Point = textField.localToGlobal(rect.bottomRight);

    var containerTopLeft:Point = container.globalToLocal(globalTopLeft);
    var containerBottomRight:Point = container.globalToLocal(globalBottomRight);

    rect = new Rectangle(containerTopLeft.x,containerTopLeft.y,containerBottomRight.x-containerTopLeft.x,containerBottomRight.y-containerTopLeft.y)
}

Answer 2

If the TextField is a child of the container and the TextField is not scaled, you can just do:

rect = textField.getCharBoundaries(i);
rect.x += textField.parent.x;
rect.y += textField.parent.y;