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