[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设置文字的样式,目前支持的标签有bi,支持的font标签属性有colorsizeface

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;

 

转载于:https://www.cnblogs.com/shenjie0507/p/10133547.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值