Terminal emulation in Flex

Answer 1

The font is fixed width and height, so making a background bitmap dynamically isn't difficult, and is probably the quickest and easiest solution. In fact, if you size it correctly there will only be one stretched pixel per character.

Color the pixel (or pixels) according to the background of the character.

Answer 2

Use TextField.getCharBoundaries to get a rectangle of the first and last characters in the areas where you want a background. From these rectangles you can construct a rectangle that spans the whole area. Use this to draw the background in a Shape placed behind the text field, or in the parent of the text field.

Update you asked for an example, here is how to get a rectangle from a range of characters:

var firstCharBounds : Rectangle = textField.getCharBoundaries(firstCharIndex);
var lastCharBounds  : Rectangle = textField.getCharBoundaries(lastCharIndex);

var rangeBounds : Rectangle = new Rectangle();

rangeBounds.topLeft = firstCharBounds.topLeft;
rangeBounds.bottomRight = lastCharBounds.bottomRight;

If you want to find a rectangle for a whole line you can do this instead:

var charBounds : Rectangle = textField.getCharBoundaries(textField.getLineOffset(lineNumber));

var lineBounds : Rectangle = new Rectangle(0, charBounds.y, textField.width, firstCharBounds.height);

When you have the bounds of the text range you want to paint a background for, you can do this in the updateDisplayList method of the parent of the text field (assuming the text field is positioned at [0, 0] and has white text, and that textRangesWithYellowBackground is an array of rectangles that represent the text ranges that should have yellow backgrounds):

graphics.clear();

// this draws the black background
graphics.beginFill(0x000000);
graphics.drawRect(0, 0, textField.width, textField.height);
graphics.endFill();

// this draws yellow text backgrounds
for each ( var r : Rectangle in textRangesWithYellowBackground )
    graphics.beginFill(0xFFFF00);
    graphics.drawRect(r.x, r.y, r.width, r.height);
    graphics.endFill();
}

Answer 3

Theo, any chance you could add a fully working mxml example file that does this? I'm having trouble getting my head fully around it...