Cocos Creator RichText圖文混排 (動態加入表情)

版本：2.4.4

 

一 使用RichText圖文混排

二 動態加入圖片

 

一 使用RichText圖文混排

將多張表情圖標使用TexturePackerGUI合圖

 

 

 

 

 

將合圖拖動到RichText的ImageAtlas屬性上

 

 

 

插入圖片使用<img>標簽，設置src屬性為合圖其中一個spriteFrame的名字， 例如設置RichText的string為

<color=#00ff00>Rich</c><img src='face1'/>

 

 

圖片大小會等比縮放到RichText組件Line Height屬性大小，例如設置Line Height是200：

 

 

二 動態加入圖片

動態加載圖片，做為RichText的表情。

 

 assets/resources/ 下放一張圖片face999.png

 

 

動態加載圖片face999.png，並賦值給RichText當前圖集

        //加載圖片face999.png
        cc.resources.load("face999", cc.SpriteFrame, (error, asset)=>{
            //將圖片賦值給當前表情圖集imageAtlas
            this.richText.imageAtlas["_spriteFrames"]["face999"] = asset;
            //顯示表情
            this.richText.string = "<color=#00ff00>Rich</c><img src='face1'/><img src='face999'/>";
        });

　　

顯示結果