egret 文本的运用

这是一个不起眼的小知识，但今天不写点啥浑身不舒服，又有点赶时间，所以就写这个吧

 

使用输入文本

 

 1 //创建输入文本
 2 var txInput:egret.TextField = new egret.TextField;
 3 txInput.type = egret.TextFieldType.INPUT;
 4 txInput.width = 282;
 5 txInput.height = 43;
 6 txInput.x = 134;
 7 txInput.y = 592;
 8 txInput.textColor = 0x000000;
 9 /// 注意_container是事先建立好的一个显示容器，即 egret.Sprite，并且已经添加到显示列表中
10 this._container.addChild(txInput);

文本获得焦点

通过输入文本的 setFocus 方法，可以在用户操作下使输入文本获得焦点。需要注意的是 setFocus 方法需要在用户操作的事件中进行调用，比如下面这样：

 1 var textIput:egret.TextField = new egret.TextField();
 2 textIput.type = egret.TextFieldType.INPUT;
 3 this.addChild(textIput);
 4 textIput.setFocus();//此时获取焦点是不起作用的
 5 
 6 var tx: egret.TextField = new egret.TextField();
 7 this.addChild(tx);
 8 tx.y = 100;
 9 tx.textFlow = (new egret.HtmlTextParser).parser("<u><font href='event:http://www.egret.com/'>有链接的文字</font></u>\n无连接的文字")
10 tx.touchEnabled = true;
11 tx.addEventListener(egret.TextEvent.LINK, (evt: egret.TextEvent) => {
12             textIput.setFocus();//这里设置才会获得焦点
13         }, this);

设置输入样式

在 Egret 3.1.2 中更新了设置输入文本样式，现在支持 3 中输入样式即普通文本（默认），密码和电话号。设置不同的类型输入的样式和手机上弹出面板是不同的。设置密码样式输入时显示密码，设置电话号样式输入时在手机上弹出数字输入面板。

设置输入文本样式首先要设置 TextField 的 TextFieldType 为 INPUT 类型。然后设置 TextField 的 inputType 即可

1 //设置输入电话号样式（弹出数字键盘）
2 tel.inputType = egret.TextFieldInputType.TEL;
3 //设置输入文本样式（默认，弹出正常的输入键盘）
4 tel.inputType = egret.TextFieldInputType.TEXT;
5 //设置输入密码样式（弹出密码安全输入键盘）
6 tel.inputType = egret.TextFieldInputType.PASSWORD;

JSON方式分段设置样式

1 //json方式
2         tx.textFlow = <Array<egret.ITextElement>>[
3             { text: "您正在使用的引擎版本为", style: { "size": 20 } },
4             { text: "v3.2.3", style: { "textColor": 0x336699, "size": 60, "strokeColor": 0xff0000, "stroke": 2 } },
5             { text: "正在编译项目...", style: { "fontFamily": "楷体" } },
6             { text: "项目共计编译耗时：", style: { "textColor": 0xf000f0 } },
7             { text: "2.288秒", style: { "italic": true, "textColor": 0xf06f00 } }
8         ];

至于对象中的style都有那些属性，需要自己去查，也许大家都是用到的时候才会去查看，另外一种就是html格式的

类HTML方式设置样式

1 //类html方式
2         tx2.textFlow = (new egret.HtmlTextParser).parser(
3             '<font size="20">您正在使用的引擎版本为</font>' +
4             '<font color="#336699" size="60" fontFamily="Verdada">Verdanna blue large</font>' +
5             '<font color="#ff7f50" size="10">珊瑚色<b>局部加粗</b>小字体</font>' +
6             '<i>斜体</i>'
7         );

文本超链接事件

1.打开 URL（点击下面的文本框，立即打开链接，不会执行 LINK事件）

 

tx.textFlow = new Array<egret.ITextElement>(
    { text:"这段文字有链接", style: { "href" : "http://www.egret.com/" } }
    ,{ text:"\n这段文字没链接", style: {} }
);
tx.touchEnabled = true;
tx.addEventListener(egret.TextEvent.LINK, (evt: egret.TextEvent) => {
    console.log(evt.text);//点击超链接的时候 不会执行
}, this);

 

2. 针对文本中特有的某段文字内容进行超链接，需要响应Touch事件，这个在实际项目中经常用到。我们可以通过对该段文字设置href来实现，类似于html中的href。我们通过如下代码来学习这个功能：

 

1 tx.textFlow = (new egret.HtmlTextParser).parser("大家好，我的名字是<u><font href='event:myx'>某某某</font></u>，很高兴认识大家！")
2         tx.touchEnabled = true;
3         tx.addEventListener(egret.TextEvent.LINK, (evt: egret.TextEvent) => {
4             console.log(evt.text);//输出 myx
5 }, this);

 

 

 

 

总结：每天都需要积累一些东西，不论大小，积累的多了自然就全面了，望自己再接再厉，继续加油前进！！！

 

转载于:https://www.cnblogs.com/PigpigRun/p/10440307.html