Flex中的终端仿真

时间:2020-03-05 18:52:43  来源:igfitidea点击:

我需要对Flex中的某些旧DOS或者大型机终端进行仿真。例如下图所示。

替代文字http://i36.tinypic.com/2encfes.png

使用不同颜色的文本很容易,但是具有不同背景颜色(例如黄色背景)的能力超出了标准Flash文本的能力。

我可能还需要能够在某些位置输入文本并在"终端"上向上滚动文本。知道我该怎么攻击吗?还是更好的是,是否存在用于此类事情的任何现有代码/组件?

解决方案

回答

字体的宽度和高度是固定的,因此动态制作背景位图并不难,并且可能是最快,最简单的解决方案。实际上,如果正确设置尺寸,则每个字符只有一个拉伸像素。

根据字符的背景为像素着色。

-亚当

回答

使用TextField.getCharBoundaries来获取我们想要背景的区域中第一个和最后一个字符的矩形。从这些矩形中,我们可以构建一个覆盖整个区域的矩形。使用它在文本字段后面或者文本字段的父级中以"形状"绘制背景。

更新我们要求的示例,这是如何从一系列字符中获取矩形:

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