9.27.高级文本布局

问题
我想要更灵活的布局方式
解决办法
使用numLines 属性和getCharBoundaries( ), getCharIndexAtPoint( ), getFirstCharInParagraph( ),getLineIndexAtPoint( ), getLineIndexOfChar( ), getLine- Length( ), getLineMetrics( ), getLineOffset( ),getLineText( ), 和getParagraphLength( ) 方法
讨论
在Flash播放器8以及之前的版本很难精确控制文本布局,从8.5开始TextField 类定义了一系列API用于精确控制文本布局。

TextField类提供了两个方法获取文本信息,getCharBoundaries( )方法返回flash.geom.Rectangle 对象,它定义指定位置的字符的边界,getCharIndexAtPoint( )方法指定坐标的字符在文本中的位置。

下面的例子使用getCharIndexAtPoint( ) 和getCharBoundaries( ) 高亮显示用户选中的字符:
+展开
-ActionScript
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class Text extends Sprite {
private var _field:TextField;
private var _highlight:Sprite;
public function Text( ) {
_field = new TextField( );
_field.border = true;
_field.background = true;
_field.multiline = true;
_field.wordWrap = true;
_field.selectable = false;
_field.width = 400;
_field.height = 400;
addChild(_field);
_field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus,
aliquet a, ornare ac, suscipit a, est. Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et,
elementum vel, fringilla sed, dui. Praesent fermentum interdum orci.";
_field.addEventListener(MouseEvent.CLICK, onClick);
_highlight = new Sprite( );
addChild(_highlight);
}
private function onClick(event:MouseEvent):void {
var index:int = _field.getCharIndexAtPoint(mouseX, mouseY);
var rectangle:Rectangle = _field.getCharBoundaries(index);
_highlight.graphics.clear( );
_highlight.graphics.lineStyle(0, 0, 0);
_highlight.graphics.beginFill(0x00FFFF, .25);
_highlight.graphics.drawRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
_highlight.graphics.endFill( );
}
}
}

TextField类也定义了一个属性和方法获取多行文本的信息。numLines 属性表示文本框所包含的文本行数,getLineIndexAtPoint( ) 方法返回当前坐标所在的行数,getLineIndexOfChar( )返回指定字符所在的行数,getLineLength( )方法返回指定行所包含的字符数,getLineText( )方法返回指定行所包含的文本,getLineOffset( )方法返回指定行第一个字符的位置,getLineMetrics( )方法关于指定行数的flash.text.TextLineMetrics对象。TextLineMetrics类定义了该行文本的上位,下位,高度,宽度等等信息。

还有两个方法用于获取段落信息:getFirstCharInParagraph( )方法返回指定段落的第一个字符所在位置,getParagraphLength( )方法返回指定段落所包含的字符数。

下面的例子演示了上面讨论的大多数方法:
+展开
-ActionScript
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextLineMetrics;
public class Text extends Sprite {
private var _field:TextField;
private var _highlight:Sprite;
public function Text( ) {
_field = new TextField( );
_field.border = true;
_field.background = true;
_field.multiline = true;
_field.wordWrap = true;
_field.selectable = false;
_field.width = 400;
_field.height = 400;
addChild(_field);
_field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus,
aliquet a, ornare ac, suscipit a, est. Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et,
elementum vel, fringilla sed, dui. Praesent fermentum interdum orci.";
_field.addEventListener(MouseEvent.CLICK, onDoubleClick);
_highlight = new Sprite( );
addChild(_highlight);
}
private function onDoubleClick(event:MouseEvent):void {
var index:int = _field.getCharIndexAtPoint(mouseX, mouseY);
var startIndex:int = _field.getFirstCharInParagraph(index);
var stopIndex:int = startIndex + _field.getParagraphLength(index);
var startLine:int = _field.getLineIndexOfChar(startIndex);
var stopLine:int = _field.getLineIndexOfChar(stopIndex - 1);
var metrics:TextLineMetrics;
var lineCharacter:int;
var rectangle:Rectangle;
_highlight.graphics.clear( );
_highlight.graphics.lineStyle(0, 0, 0);
for(var i:int = startLine; i <= stopLine; i++) {
lineCharacter = _field.getLineOffset(i);
rectangle = _field.getCharBoundaries(lineCharacter);
metrics = _field.getLineMetrics(i);
_highlight.graphics.beginFill(0x00FFFF, .25);
_highlight.graphics.drawRect(rectangle.x, rectangle.y, metrics.width, metrics.height);
_highlight.graphics.endFill( );
}
}
}
}

加支付宝好友偷能量挖...


评论(0)网络
阅读(93)喜欢(0)flash/flex/fcs/AIR