Терминальная эмуляция в Flex

Question

Мне нужно выполнить эмуляцию некоторых старых терминалов DOS или мэйнфреймов в Flex. Что-то вроде изображения ниже, например.

alt text http://i36.tinypic.com/2encfes.png

Различные цвета текста достаточно легко, но способность делать разные цвета фона, такие как желтый фон выходит за рамки возможностей стандартного Flash-текста.

Возможно, мне также понадобится ввести текст в определенные места и прокрутить текст до «терминала». Любая идея, как я буду нападать на это? Или еще лучше, любой существующий код/​​компоненты для такого рода вещей?

Answer 1

Шрифт имеет фиксированную ширину и высоту, поэтому динамическое отображение фонового изображения не является трудным и, вероятно, является самым быстрым и простым решением. На самом деле, если вы правильно его размер, будет только один растянутый пиксель на символ.

Цвет пикселя (или пикселей) в соответствии с фоном символа.

-Adam

Answer 2

Используйте TextField.getCharBoundaries, чтобы получить прямоугольник первых и последних символы в тех областях, где вы хотите фон. Из этих прямоугольников вы можете построить прямоугольник, охватывающий всю область. Используйте это, чтобы нарисовать фон в Shape, расположенном за текстовым полем или в родительском элементе текстового поля.

Update вы просили пример, вот как получить прямоугольник из диапазона символов:

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; 

Если вы хотите найти прямоугольник для всей линии, которую вы можете сделать это вместо того, чтобы:

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

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

Если у вас есть границы текстового диапазона вы хотите, чтобы нарисовать фон для, вы можете сделать это в updateDisplayList метод родительского текстового поля (предполагается, что текстовое поле расположено на [0, 0] и имеет белый текст, и что textRangesWithYellowBackground представляет собой массив из прямоугольников, которые представляют собой текстовые диапазоны, которые должны иметь желтый фон):

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(); 
}