cocos2dx-js 实现自定义富文本

来源：互联网发布：java 办公系统编辑：程序博客网时间：2024/06/05 02:01

在做游戏的时候，有一个特殊的需求引擎没有直接提供。

一段Label有一部分是其他颜色，

例如：“一只优雅的攻城狮”

上面这个Label，一般想到的常规方式是用四个Label拼接，放到不同的位置。

其实RichText是提供了这种功能的，用设置好的四个RichElementText就能实现。但是相对来说比较繁琐，而对于策划来说比较难懂，后来协定的做法是用HTML文本格式来实现这种效果，也就是说给你一段HTML的文本，你就能显示出相应的富文本的格式。

比如：

"<font fontSize=18 color=255,255,0>产生一些正则表达式</font></br><font fontSize=18 color=0,255,82 >随机的碎片</font><font fontSize=18>，提高VIP等级能获得更多免费次数！</font><font fontSize=18 color=255,255,0>产生一些正则表达式</font></br><font fontSize=18 color=0,255,82 >随机的碎片</font>"

上面采取的是简化的HTML，当然其实你可以自己定，相应的代码就会产生变化。

产生的结果如图：

当然一行的长度可以自己控制。

先贴代码，后面再做整理。(这里用到的主要是一些简单的正则表达式和字符串处理，后面还会做优化，有问题一起讨论)

var fontInfo = cc.Class.extend({    fontName:null,    fontSize:null,    color:null,    opacity:null,    ctor:function (){        var self = this;        self.fontName = "Helvetica";        self.fontSize = 24.0;        self.opacity = 255;        self.color = "255,255,255";    }});//富文本var SuperRichText = ccui.Widget.extend({    fontList:null,//字体列表    lineList:null,//RichText列表    m_line:null,//当前文本    m_width:0,    m_height:0,    m_max:0,    m_htmlJsonList:null,    m_defaultFontSize:18,    /*     _width    文本宽度     _height    文本高度     _string    字符串     _pos       位置     _args      参数替换列表     _fontSize  默认字体大小     */    ctor:function(_width,_height,_string,_pos,_args,_fontSize){        ccui.Widget.prototype.ctor.call(this);        var self = this;        self.fontList = [];        self.lineList = [];        self.m_htmlJsonList = [];        self.setSize(_width,_height);        self.fontList.push(new fontInfo());        self.addNewLine();        if(typeof _pos != "undefined"){            self.setPosition(_pos);        }        if(typeof _args != "undefined"){            _string = _string.format(_args);        }        if(typeof _fontSize != "undefined"){            self.m_defaultFontSize = _fontSize;        }        self.analysisHtml(_string);        return self;    },    setSize:function(_width, _height){        this.m_width = _width;        this.m_height = _height;    },    renderHtml:function(_json)    {        _json = eval(_json);        var self = this;        var colorArr= [];        for(var i in _json)        {            var obj = _json[i];            if(obj.text == "</br>"){                self.addNewLine();            }else if(obj.text != ""){                //添加文字                colorArr = obj.color.split(',');                var textElement = new ccui.RichElementText(0, cc.color(parseInt(colorArr[0]), parseInt(colorArr[1]), parseInt(colorArr[2]), parseInt(obj.opacity)), parseInt(obj.opacity), obj.text, obj.fontName, parseInt(obj.fontSize));                var num = self.m_width/parseInt(obj.fontSize)*2;        //一行能容纳的字数                var max = self.LengthOfString(obj.text);                //文本长度                var actualWidth = max*obj.fontSize/2;                var hang = Math.ceil((self.m_line.actualWidth+actualWidth)/self.m_width);                self.m_line.actualWidth = parseInt(self.m_line.actualWidth)+actualWidth+obj.fontSize*2;                self.m_max = parseInt(obj.fontSize)>self.m_max?parseInt(obj.fontSize):self.m_max;       //取字体大的那个                self.m_line.width = self.m_width-obj.fontSize*2;                self.m_line.height = hang*Math.ceil(self.m_max+self.m_max/5);                self.m_line.pushBackElement(textElement);            }else if(obj.img != ""){                //添加图片                colorArr = obj.color.split(',');                var image = new ccui.RichElementImage(0, cc.color.WHITE, parseInt(obj.opacity), obj.img);                self.m_line.pushBackElement(image);            }        }        self.updateLine();    },    //解析HTML    analysisHtml:function(_str){        // 解析属性 (\w+)=([^\s>]+)        var self = this;        var curString = _str;        var begin = curString.search("<font");        var end = curString.search("</font>");        if(begin >= 0){            if(begin > 0){                var str = curString.slice(0,begin);                var htmlJson = {};                htmlJson["fontSize"] = self.m_defaultFontSize;                htmlJson["color"] = "255,255,255";                htmlJson["opacity"] = 255;                htmlJson["fontName"] = res.font;                htmlJson["text"] = str;                self.m_htmlJsonList.push(htmlJson);            }            while(begin >= 0){                var htmlText = curString.slice(begin,end+7);                console.log("htmlText = "+htmlText);                var attr = htmlText.match(/(\w+)=([^\s>]+)/g);                var content = htmlText.match(/>.*</)[0];                var htmlJson = {};                htmlJson["text"] = content.slice(1,content.length-1);                if(attr){                    for(var i in attr){                        var array = attr[i].split("=");                        if(array[0] == "fontSize"){                            htmlJson["fontSize"] = array[1];                        }else{                            htmlJson["fontSize"] = self.m_defaultFontSize;                        }                        if(array[0] == "color"){                            htmlJson["color"] = array[1];                        }else{                            htmlJson["color"] = "255,255,255";                        }                        if(array[0] == "opacity"){                            htmlJson["opacity"] = array[1];                        }else{                            htmlJson["opacity"] = 255;                        }                        if(array[0] == "fontName"){                            htmlJson["fontName"] = array[1];                        }else{                            htmlJson["fontName"] = res.font;                        }                    }                }else{                    htmlJson["fontSize"] = self.m_defaultFontSize;                    htmlJson["color"] = "255,255,255";                    htmlJson["opacity"] = 255;                    htmlJson["fontName"] = res.font;                }                self.m_htmlJsonList.push(htmlJson);                console.log("attr = "+attr);                curString = curString.slice(end+7,curString.length);                var brTag = curString.search("</br>");                if(brTag == 0){                    //换行                    var brHtmlJson = {};                    brHtmlJson["text"] = "</br>";                    self.m_htmlJsonList.push(brHtmlJson);                    curString.slice(5,curString.length);                }                begin = curString.search("<font");                end = curString.search("</font>");            }        }else{            var htmlJson = {};            htmlJson["fontSize"] = self.m_defaultFontSize;            htmlJson["color"] = "255,255,255";            htmlJson["opacity"] = 255;            htmlJson["fontName"] = res.font;            htmlJson["text"] = _str;            self.m_htmlJsonList.push(htmlJson);        }        self.renderHtml(self.m_htmlJsonList);        console.log("analysis Ended!");    },    //解析属性    analysisAttr:function(_str){        var self = this;    },    LengthOfString:function(str){        var len = 0;        for (var i=0; i<str.length; i++) {            var c = str.charCodeAt(i);            //单字节加1            if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {                len++;            }            else {                len+=2;            }        }        return len;    },    addNewLine:function(){        //新加一个RichText        var self = this;        self.m_line = new ccui.RichText();        self.m_line.actualWidth = 0;        //self.m_line.setSizeType(ccui.Widget.SIZE_ABSOLUTE);        self.m_line.ignoreContentAdaptWithSize(false);        self.lineList.push(self.m_line);        self.addChild(self.m_line);        self.m_max = 0;    },    updateLine:function(){        //调整RichText位置        var self = this;        var maxWidth = 0.0;        var maxHeight = 0.0;        for(var i=self.lineList.length-1; i>=0; i--){            var line = self.lineList[i];            line.setAnchorPoint(cc.p(0, 0));            line.formatText();            var size = line.getContentSize();            console.log("maxHeight =" +maxHeight);            line.setPositionY(maxHeight);            if(size.width>maxWidth){                maxWidth=size.width;            }            maxHeight+=size.height;        }        self.setAnchorPoint(cc.p(0, 0));        self.setContentSize(maxWidth, maxHeight);    }});

0 0