首页 > 代码库 > Egret 文本处理
Egret 文本处理
常规处理：
private createGameScene():void { var shp = new egret.Shape(); shp.graphics.beginFill(0xff0000, 1); shp.graphics.drawRect(0, 0, 480, 800); shp.graphics.endFill(); this.addChild(shp); var label:egret.TextField = new egret.TextField(); label.text = "实例文本"; //设置文本内容 label.width = 480; label.height = 800; label.size = 80; //设置字号大小 label.textColor = 0x00ff00; //设置字体颜色 label.fontFamily = "KaiTi"; //设置字体样式 label.textAlign = egret.HorizontalAlign.RIGHT; //水平右对齐，相对于 textField 控件自身的 width 与 height label.verticalAlign = egret.VerticalAlign.TOP; //垂直上对齐 label.strokeColor = 0x0000ff; //描边颜色 label.stroke = 2; //描边宽度 this.addChild(label); }
常用字体表：
| 中文名称 | font-family |
|---|---|
| 宋体 | SimSun |
| 黑体 | SimHei |
| 微软雅黑 | Microsoft YaHei |
| 微软正黑体 | Microsoft JhengHei |
| 新宋体 | NSimSun |
| 新细明体 | PMingLiU |
| 细明体 | MingLiU |
| 标楷体 | DFKai-SB |
| 仿宋 | FangSong |
| 楷体 | KaiTi |
| 仿宋_GB2312 | FangSong_GB2312 |
| 楷体_GB2312 | KaiTi_GB2312 |
自定义字体：
需要改成自定义的字体，需要设置对应的 default_fontFamily 的路径。路径开始不加 ‘/‘则从项目的主目录开始，加了则从系统的目录中去查找。
由于在发布的时候 resource 文件夹下的文件名会被序列化，建议不要放到 resource 下面，单独放到一个 fonts 文件夹下面并且在发布的时候手动拷贝到 native 工程中。
示例：
JSON 样式配置：
textField.textFlow 接受 egret.ITextElement 数组
interface ITextElement{ text:string; style?:ITextStyle; }
private createGameScene():void { var tx:egret.TextField = new egret.TextField; tx.width = 400; tx.x = 10; tx.y = 10; tx.textColor = 0; tx.size = 50; tx.fontFamily = "微软雅黑"; tx.textAlign = egret.HorizontalAlign.CENTER; tx.textFlow = <Array<egret.ITextElement>>[ //转换成元素为 egret.ITextElement 的数组 {text: "妈妈再也不用担心我在", style: {"size": 12}} //ts 语法看久了容易混成 C#.. 对象怎么这样? 才想起是 ts 脚本 , {text: "Egret", style: {"textColor": 0x336699, "size": 60, "strokeColor": 0x6699cc, "stroke": 2}} , {text: "里说一句话不能包含各种", style: {"fontFamily": "楷体"}} , {text: "五", style: {"textColor": 0xff0000}} , {text: "彩", style: {"textColor": 0x00ff00}} , {text: "缤", style: {"textColor": 0xf000f0}} , {text: "纷", style: {"textColor": 0x00ffff}} , {text: "、\n"} , {text: "大", style: {"size": 36}} , {text: "小", style: {"size": 6}} , {text: "不", style: {"size": 16}} , {text: "一", style: {"size": 24}} , {text: "、"} , {text: "格", style: {"italic": true, "textColor": 0x00ff00}} , {text: "式", style: {"size": 16, "textColor": 0xf000f0}} , {text: "各", style: {"italic": true, "textColor": 0xf06f00}} , {text: "样", style: {"fontFamily": "楷体"}} , {text: ""} , {text: "的文字了！"} ]; this.addChild( tx ); }
文本超链接：
private createGameScene():void { var tx:egret.TextField = new egret.TextField; tx.textFlow = <Array<egret.ITextElement>>[ { text:"点击响应", style:{"href":"event:has been triggered.", "size":80}}, //href 可以指定 url 或者是 event,默认为 url { text:"\n点击无响应", style:{"size":80}} ]; tx.touchEnabled = true; tx.addEventListener(egret.TextEvent.LINK, (evt:egret.TextEvent) => { console.log(evt.text); }, this); tx.x = 10; tx.y = 10; this.addChild(tx); }
文本输入：
//白色输入框背景板 private layTxBg(tx:egret.TextField) { var shp:egret.Shape = new egret.Shape(); shp.graphics.beginFill(0xffffff); shp.graphics.drawRect(tx.x, tx.y, tx.width, tx.height); shp.graphics.endFill(); this.addChild(shp); } /** * 创建游戏场景 * Create a game scene */ private createGameScene():void { //绘制绿色背景板 var shp: egret.Shape = new egret.Shape(); shp.graphics.beginFill(0x00ff00); shp.graphics.drawRect(0,0,640,960); shp.graphics.endFill(); this.addChild(shp); //黑字输入框 var txInput:egret.TextField = new egret.TextField(); txInput.type = egret.TextFieldType.INPUT; //设置文本样式-输入框 txInput.width = 200; txInput.height = 50; txInput.x = 50; txInput.y = 50; txInput.textColor = 0x000000; this.layTxBg(txInput); this.addChild(txInput); var button = new egret.Shape(); button.graphics.beginFill(0x00cc00); button.graphics.drawRect(50, 200, 100, 40); button.graphics.endFill(); button.x = 50; button.y = 200; button.touchEnabled = true; button.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (e) => { //第一次触摸控件时，将焦点设置在文本输入控件上 txInput.setFocus(); }, this); this.addChild(button); }
通过设置输入样式可以控制弹出的键盘类型：
egret.TextFieldInputType.TEXT; //九宫格输入egret.TextFieldInputType.PASSWORD; //英文键盘egret.TextFieldInputType.TEL; //数字键盘
Egret 文本处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。