9.13.格式化文本

问题
我要格式化文本框文本
解决办法
使用HTML标签,或传递TextFormat对象给TextField.setTextFormat( ) 方法,或设置文本框的styleSheet属性
讨论
应用格式化文本有以下几种方式:
使用HTML标签进行格式化,如<font>, <b>, 和<u> 标签。
使用TextFormat对象。
使用CSS。

三种方式各有优缺点,HTML格式化可能是最简单的,但是难于管理,使用TextFormat对象比HTML复杂,如果要应用复杂的格式化,它比HTML格式化要好用的多。通过StyleSheet对象使用CSS样式是最具灵活性的,它可以读取CSS文档应用到SWF文件上而不需要每次都重新编译。

最快最简单的方式就是使用HTML标签。例如,下面的代码显示粗体和下划线文字:
+展开
-ActionScript
field.html = true;
field.htmlText = "<b>Bold text</b> <u>Underlined text</u>";

使用TextFormat对象进行格式化稍微复杂些,首先要先创建TextFormat对象:
+展开
-ActionScript
var formatter:TextFormat = new TextFormat( );

接着,对TextFormat对象的一些属性进行赋值:
+展开
-ActionScript
formatter.bold = true// 设置粗体
formatter.color = 0xFFFF00; // 设置文本颜色为黄色
formatter.blockIndent = 5; //调整间距为5

通过setTextFormat( )方法应用:
+展开
-ActionScript
field.setTextFormat(formatter);

通过setTextFormat( )方法格式化只对当前的文本起作用,如果之后又加入文本则不会进行格式化:
+展开
-ActionScript
field.text = "this is sample text";
field.setTextFormat(formatter); // 应用格式化
field.text = "this is new text"// 没有应用格式化
field.setTextFormat(formatter); // 再次应用格式化
field.text += "appended text"// 格式化被取消

如果改变了TextFormat对象则需重新调用setTextFormat( )方法。

使用flash.text.StyleSheet类可支持CSS。StyleSheet构造函数不需要任何参数:
+展开
-ActionScript
var css:StyleSheet = new StyleSheet( );

下面的表格列出了CSS 属性和相应的ActionScript 属性:
CSS 属性ActionScript 值
color color 十六进制值#RRGGBB
display display 显示文本方式:inline,block,none
font-family fontFamily 字体类型font-size fontSize 字体大小
font-style fontStyle normal 或italic
font-weight fontWeight normal 或bold
kerning kering true 或false,只对嵌入字体有效
margin-left marginLeft 左边距margin-right marginRight 右边距
text-align textAlign 对齐方式:left,center,right,justify
text-decoration textDecoration none,underline
text-indent textIndent 缩进

通过构造函数生成一个StyleSheet 对象,然后传递给setStyle( )方法。一个样式表对象实际上是一个ActionScript样式数组,看下面的例子:
+展开
-ActionScript
var sampleStyle:Object = new Object( );
sampleStyle.color = "#FFFFFF";
sampleStyle.textAlign = "center";

下面的代码等同于上面的代码:
+展开
-ActionScript
var sampleStyle:Object = {color: "#FFFFFF", textAlign: "center"};

然后调用类的setStyle( )方法应用样式:
+展开
-ActionScript
css.setStyle(".sample", sampleStyle);

虽然我们可以这样定义,但实际应用中很少这样,一般都是读取CSS文档,这样改变样式时只要修改CSS文档也不必每次重新编译.swf文件。

可通过flash.net.URLLoader类载入CSS文档。一旦读入文档,只要生成一个StyleSheet对象然后传递给对象的parseCSS( )方法即可。下面的例子载入styles.css,一个CSS文档:
+展开
-CSS
{
font-family: _sans;
color: #FFFFFF;
}

.emphasis {
font-weight: bold;
font-style: italic;
}

+展开
-ActionScript
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.Event;
import flash.text.TextFieldAutoSize;
import flash.text.StyleSheet;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class CSSText extends Sprite {
text-indent textIndent 缩进
public function CSSText( ) {
var loader:URLLoader = new URLLoader( );
loader.addEventListener(Event.COMPLETE, onLoadCSS);
var request:URLRequest = new URLRequest("styles.css");
loader.load(request);
}
private function onLoadCSS(event:Event):void {
var css:StyleSheet = new StyleSheet( );
css.parseCSS(URLLoader(event.target).data);
var field:TextField = new TextField( );
field.autoSize = TextFieldAutoSize.LEFT;
field.wordWrap = true;
field.width = 200;
addChild(field);
field.styleSheet = css;
field.htmlText = "<p><span class='emphasis'>Lorem ipsum</span> 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.</p>";
}
}
}

这里需要注意几点:
只有当文本框渲染为HTML时才可应用CSS。
HTML和CSS必须配合,比如CSS里定义了一个叫someCSSClass的类,那么HTML也必须有。
必须先应用CSS,再应用HTML。
如果用户想选择不同的CSS样式,我们可把HTML文本存在变量或数组中,这样每次新的CSS被载入时就可以重新应用了:
+展开
-ActionScript
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextFieldAutoSize;
import flash.text.StyleSheet;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class CSSText extends Sprite {
private var _field:TextField;
private var _html:String;
public function CSSText( ) {
var css1:TextField = new TextField( );
css1.text = "stylesheet 1";
css1.selectable = false;
var css1Container:Sprite = new Sprite( );
css1Container.addEventListener(MouseEvent.CLICK, onCSS1);
css1Container.addChild(css1);
addChild(css1Container);
var css2:TextField = new TextField( );
css2.text = "stylesheet 2";
css2.selectable = false;
var css2Container:Sprite = new Sprite( );
css2Container.addEventListener(MouseEvent.CLICK, onCSS2);
css2Container.addChild(css2);
addChild(css2Container);
css2Container.y = 25;
_field = new TextField( );
_field.autoSize = TextFieldAutoSize.LEFT;
_field.wordWrap = true;
_field.width = 200;
addChild(_field);
_html = "<p><span class='emphasis'>Lorem ipsum</span> 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.</p>";
_field.y = 50;
}
private function loadCSS(url:String):void {
var loader:URLLoader = new URLLoader( );
loader.addEventListener(Event.COMPLETE, onLoadCSS);
var request:URLRequest = new URLRequest(url);
loader.load(request);
}
private function onCSS1(event:MouseEvent):void {
loadCSS("styles.css");
}
private function onCSS2(event:MouseEvent):void {
loadCSS("styles2.css");
}
private function onLoadCSS(event:Event):void {
var css:StyleSheet = new StyleSheet( );
css.parseCSS(URLLoader(event.target).data);
_field.styleSheet = css;
_field.htmlText = _html;
}
}
}

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


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