Egret圖文混排

class Test extends eui.Component
{
    constructor()
    {
        super();
        this.skinName = "game_main_Skin";
    }

    public text: eui.EditableText;
    public icon01: eui.Image;
    public icon02: eui.Image;
    public icon03: eui.Image;
    public icon04: eui.Image;
    public icon05: eui.Image;
    public icon06: eui.Image;
    public icon07: eui.Image;
    public icon08: eui.Image;
    public random: eui.Label;
    public childrenCreated()
    {
        super.childrenCreated();
        this.icon01.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon02.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon03.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon04.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon05.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon06.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon07.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.icon08.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTap, this );
        this.random.addEventListener( egret.TouchEvent.TOUCH_TAP, () =>
        {
            this.str += this.random.name.split( ',' )[Math.floor( Math.random() * 5 )];
            this.text.textFlow = ( new egret.HtmlTextParser ).parser( this.str );
        }, this );
        this.str += this.text.text;
    }

    private str: string = "";
    private offsetX: number = 0;
    private offsetY: number = 0;
    private onTap( e: egret.TouchEvent )
    {
        //獲取表情
        var bitmap: egret.Bitmap = new egret.Bitmap( RES.getRes( e.target.name ) );
        
        //記錄下當前文本的高度- -
        var h = this.text.height;
        
        //在文本里添加上表情的關鍵字
        this.text.text += e.target.name;
        
        //記錄一下關鍵字的位置
        var idx = this.text.text.indexOf( e.target.name );
        
        //關於位置的信息都獲取到了  所以去掉關鍵字  置空
        this.text.text = this.text.text.replace( e.target.name, "" );
        
        //用跟表情大小相同的字號  中文空格 代替表情  使後續文字連續  
        this.str += `<font size = "${bitmap.width}"> </font>`;
        
        //用富文本填充  這裏解釋爲什麼this.str 是 +=   因爲...   this.text.textFlow不能是+=
        this.text.textFlow = ( new egret.HtmlTextParser ).parser( this.str );

        //這裏判斷如果換行的話就將 X 的位置重置  Y 是總高度
        if ( this.text.textHeight != h && this.text.textHeight - ( bitmap.width - this.text.size ) != h )
        {
            this.offsetX -= this.text.textWidth;
            this.offsetY = h;
        }
        
        //根據關鍵字位置  偏移量 計算 表情的x y
        var x = this.text.localToGlobal().x + this.text.size * idx + this.offsetX;
        var y = this.text.localToGlobal().y + this.offsetY;

        this.offsetX += bitmap.width - this.text.size;
        
        //添加上表情  結束- -
        bitmap.x = x;
        bitmap.y = y;
        this.addChild( bitmap );
    }
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章