<p>I need to do some emulation of some old DOS or mainframe terminals in Flex. Something like the image below for example.</p>

<p><img src="https://i.stack.imgur.com/qFtvP.png" alt="alt text"></p>

<p>The different coloured text is easy enough, but the ability to do different background colours, such as the yellow background is beyond the capabilities of the standard Flash text.</p>

<p>I may also need to be able to enter text at certain places and scroll text up the "terminal". Any idea how I'd attack this? Or better still, any existing code/components for this sort of thing?</p>

[{'answer_id': 60564, 'author': 'Adam Davis', 'author_id': 2915, 'author_profile': 'https://Stackoverflow.com/users/2915', 'pm_score': 1, 'selected': False, 'text': "<p>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.</p>\n\n<p>Color the pixel (or pixels) according to the background of the character.</p>\n\n<p>-Adam</p>\n"}, {'answer_id': 60595, 'author': 'Theo', 'author_id': 1109, 'author_profile': 'https://Stackoverflow.com/users/1109', 'pm_score': 2, 'selected': False, 'text': '<p>Use <a href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html" rel="nofollow noreferrer"><code>TextField.getCharBoundaries</code></a> 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 <code>Shape</code> placed behind the text field, or in the parent of the text field.</p>\n\n<p><em>Update</em> you asked for an example, here is how to get a rectangle from a range of characters:</p>\n\n<pre><code>var firstCharBounds : Rectangle = textField.getCharBoundaries(firstCharIndex);\nvar lastCharBounds  : Rectangle = textField.getCharBoundaries(lastCharIndex);\n\nvar rangeBounds : Rectangle = new Rectangle();\n\nrangeBounds.topLeft = firstCharBounds.topLeft;\nrangeBounds.bottomRight = lastCharBounds.bottomRight;\n</code></pre>\n\n<p>If you want to find a rectangle for a whole line you can do this instead:</p>\n\n<pre><code>var charBounds : Rectangle = textField.getCharBoundaries(textField.getLineOffset(lineNumber));\n\nvar lineBounds : Rectangle = new Rectangle(0, charBounds.y, textField.width, firstCharBounds.height);\n</code></pre>\n\n<p>When you have the bounds of the text range you want to paint a background for, you can do this in the <code>updateDisplayList</code> method of the parent of the text field (assuming the text field is positioned at [0, 0] and has white text, and that <code>textRangesWithYellowBackground</code> is an array of rectangles that represent the text ranges that should have yellow backgrounds):</p>\n\n<pre><code>graphics.clear();\n\n// this draws the black background\ngraphics.beginFill(0x000000);\ngraphics.drawRect(0, 0, textField.width, textField.height);\ngraphics.endFill();\n\n// this draws yellow text backgrounds\nfor each ( var r : Rectangle in textRangesWithYellowBackground )\n    graphics.beginFill(0xFFFF00);\n    graphics.drawRect(r.x, r.y, r.width, r.height);\n    graphics.endFill();\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/60558', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/6277/']