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);
总结:每天都需要积累一些东西,不论大小,积累的多了自然就全面了,望自己再接再厉,继续加油前进!!!