[Egret][文档]文本
一、文本类型
1.普通文本
egret.TextField
类表示文本类型,egret.TextField
类包含 text
属性,该属性是当前文本的显示内容。
var label:egret.TextField = new egret.TextField(); label.text = "This is a text!"; this.addChild( label );
2.输入文本
将文本对象的type设置为egret.TextFieldType.INPUT;
var txInput:egret.TextField = new egret.TextField(); txInput.type = egret.TextFieldType.INPUT; /// 注意_container是事先建立好的一个显示容器,即 egret.Sprite,并且已经添加到显示列表中 this._container.addChild(txInput)
输入文本有 setFocus()
方法,作用是使输入文本获得焦点
TextField.setFocus();
输入文本的输入样式有三种:普通文本(默认),密码和电话号。
将文本对象的inputType设置为相应的值表示相应的类型。
egret.TextFieldInputType.TEXT表示普通文本,egret.TextFieldInputType.PASSWORD表示密码,egret.TextFieldInputType.TEL表示电话。
3.位图文本
——借助位图字体渲染的文本类型。
位图文本使用egret.BitmapText
类,而不是egret.TextField
类。其使用方法为:
- 加载位图字体文件
- 将加载后的字体对象赋值给
egret.BitmapText
的font
属性。
private onAddToStage( evt:egret.Event ) { RES.getResByUrl( "resource/cartoon-font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT ); } private _bitmapText:egret.BitmapText; private onLoadComplete( font:egret.BitmapFont ):void { this._bitmapText = new egret.BitmapText(); this._bitmapText.font = font;this.addChild( this._bitmapText ); }
二、文本样式
1.字体
设置字体的属性是 fontFamily
var label:egret.TextField = new egret.TextField(); this.addChild( label ); label.fontFamily = "Impact"; label.text = "This is a text!";
用 egret.registerFontMapping()
方法可以添加自定义字体,该方法传入两个参数:字体名称和字体文件路径:
egret.registerFontMapping("font1", "fonts/font1.ttf");
2.字号
egret.TextField
类包含 size
属性,该属性是当前文本的字号大小。
egret.TextField.default_size
属性可设置全局的默认文本字号大小。
egret.TextField
的对象自身尺寸会根据首次设置的文本内容自动计算。
3.字体颜色
可以通过 textColor
修改 egret.TextField
对象中文本的颜色。
textColor
可以接受一个16进制的颜色值,也可以接受其他进制的数字。但推荐使用16进制。
egret.TextField.default_textColor
属性可设置全局的默认文本颜色
4.描边
描边的颜色需要设置 strokeColor
属性,描边的宽度需要设置 stroke
属性。
5.加粗与斜体
文本的加粗和斜体适用与整体 egret.TextField
对象,不能单独设置 egret.TextField
中某一个文字或一段文字。
设置加粗的属性为 bold
设置斜体的属性为 italic
6.多种样式文本混合
——在一段文字,甚至一行文字内有丰富的样式变化
有两种方式来实现:
JSON方式分段设置样式
基本结构是
interface ITextElement { text: string; // 文本 style: ITextStyle; // 样式 例:{"textColor":0xFF0000, "size":30} }
多种样式例子如下:
var tx:egret.TextField = new egret.TextField; tx.textFlow = <Array<egret.ITextElement>>[ {text: "Text in ", style: {"size": 20}} , {text: "Egret", style: {"textColor": 0x336699, "size": 60, "strokeColor": 0x6699cc, "stroke": 2}} , {text: "\n"} , {text: "styles ", style: {"textColor": 0x00ffff}} , {text: "with", style: {"size": 56}} , {text: "\n"} , {text: "fonts ", style: {"italic": true, "textColor": 0x00ff00}} ]; this.addChild( tx );
【注】:换行直接用 “\n” 即可。
类HTML方式设置样式
Egret也可以用HTML设置文字的样式,目前支持的标签有b
和i
,支持的font标签属性有color
、size
、face
。
var tx:egret.TextField = new egret.TextField; tx.textFlow = (new egret.HtmlTextParser).parser( \'<font size=20>Text in </font>\' + \'<font color=0x336699 size=60 strokecolor=0x6699cc stroke=2>Egret</font>\' + \'<font> \n </font>\' + \'<font color=0x00ff00>variety </font>\' + \'<font size=26>colors, </font>\' + \'<font> \n </font>\' + \'<font color=0xf06f00><i>sizes</i></font>\'; ); this._container.addChild( tx );
三、文本布局
文本的布局分为横向和纵向两种。
横向布局可以设置文字居左,水平居中,居右。
纵向布局可以设置文字居顶,垂直居中,居底。
1.横向布局
使用 egret.TextFiled
的 textAlign
属性。设置 textAlign
属性可以从 HorizontalAlign
类中选取不同的对齐方式。
label.textAlign = egret.HorizontalAlign.RIGHT; label.textAlign = egret.HorizontalAlign.LEFT; label.textAlign = egret.HorizontalAlign.CENTER;