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;          //数字键盘

 

转载于:https://www.cnblogs.com/Daniel-Liang/p/5930327.html