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 文本处理的更多相关文章
- Egret引擎随学随机
1.纹理集实际上就是将一些零碎的小图放到一张大图当中.游戏中也经常使用到纹理集.使用纹理集的好处很多,我们通过将大量的图片拼合为一张图片从而减少网络请求,原先加载数次的图片资源现在加载一次即可.同时, ...
- 【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)
一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果 二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...
- egret GUI 文本混排+文本链接的聊天解决方案【取巧法】
ui方面: <e:Scroller verticalScrollPolicy="auto" width="468" height="620&qu ...
- EUI 自动滚动的聊天文本
一 自动滚动的聊天文本 当文本输入改变时,将scrollV值等于maxScrollV值. private scrollLabel:eui.Label; egret.Tween.).call(()=&g ...
- Egret白鹭H5小游戏开发入门(三)
前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...
- Html5 Egret游戏开发 成语大挑战(六)游戏界面构建和设计
本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用EgretWing就可以达到目的,本篇可能是篇幅最少的一个,但是涉及自定 ...
- Html5 Egret游戏开发 成语大挑战(三)开始界面
本篇需要在前面的素材准备完毕,才可以开始,使用egret的eui结合代码编辑,快速完成基本的界面搭建,这里写的可能比较细,目的是减少大家对于其中一些操作疑问,我去掉了很多无用的步骤,以最精简的流程来完 ...
- Egret官方案例学习笔记
1.资源记载方式 (1)Egret引擎是2.0.5. (2)resource/resource.json文件是: { "resources": [ { "name&quo ...
- Egret 矢量绘图、遮罩、碰撞检测
矢量绘图: 1. 为矢量绘图绘制外边 - graphics.lineStype() private createGameScene():void { console.log("Runtime ...
随机推荐
- 优化exp/imp导入导出速度大全
.exp 个相关的参数:DIRECT和RECORDLENGTH参数. DIRECT参数定义了导出是使用直接路径方式(DIRECT=Y),还是常规路径方式(DIRECT=N).常规路径导出使用SQL ...
- angularJS 服务三
路由 一 简介 1.路由机制 为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面 ...
- dubbo源码分析二:服务发布
本文将深入分析dubbo的服务发布涉及到的流程及主要类的代码.首先,我们先从类的关系图来看一下dubbo发布服务涉及到的相关类. 1.类图 上图展示了部分服务发布过程中需要使用到的类和接口,其中: s ...
- hook研究结果备忘
hook研究结果: 最近一周时间仔细研究了一下hook,也许不能称之为研究吧.顶多是让别人的思想拿过来抄袭一遍而已,写点结果也算对得起自己的这几天的苦心了. 1,首先从同事旁边听到了hook,然后看的 ...
- 《Android开发艺术探索》读书笔记 (6) 第6章 Android的Drawable
本节和<Android群英传>中的第六章Android绘图机制与处理技巧有关系,建议先阅读该章的总结 第6章 Android的Drawable 6.1 Drawable简介 (1)Andr ...
- Android(java)学习笔记224:横竖屏切换时Activity的生命周期
1.横竖屏切换的生命周期 默认情况下横竖屏切换,先销毁再创建 2.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...
- MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
redis 有如标题所示提示, 可从两方面查找原因: 一, 可以看一下,运行redis实例的用户, 是否对redis, 数据保存的目录有写权限(既然是排查错误,不防把redis所在目录权限最大化试一下 ...
- post 封装Map 发送请求
package com.j1.weixin.util; import java.io.IOException; import java.util.Map; import java.util.Set; ...
- asp.net,mvc4,mysql数据库,Ef遇到问题集合
asp.net mvc mysql数据库,在我一个新手自学MVC4时遇到如下的问题,一一解决掉的方法记录如下方便自己日后查看,也为了方便一些像我一样的新手遇到如下问题时,提供参考 问题一: 解决办 ...
- [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips
使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...