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;          //數字鍵盤