【Cocos2d-js教程】cocos2d-js 富文本 RichText

cocos2d-js富文本的实现还是需要GUI组件，使用UIRichText控件即可实现，该组件支持三种节点

1、ccui.RichElementText

主要操作文本，可以修改文本颜色，大小，字体

2、ccui.RichElementImage

主要操作图片

3、ccui.RichElementCustomNode

自定义节点，可以添加自定义cc.Node，比如动画，ccb等

ccui.RichText的子节点可以通过pushBackElement（插入尾部），或者insertElement（插入指定位置）方式插入richText中，具体代码如下：

var richText = new ccui.RichText();
richText.ignoreContentAdaptWithSize(false);
richText.width = 120;
richText.height = 100;

//不同颜色文本
var re1 = new ccui.RichElementText(1, cc.color.WHITE, 255, "This color is white. ", "Helvetica", 10);
var re2 = new ccui.RichElementText(2, cc.color.YELLOW, 255, "And this is yellow. ", "Helvetica", 10);
var re3 = new ccui.RichElementText(3, cc.color.BLUE, 255, "This one is blue. ", "Helvetica", 10);
var re4 = new ccui.RichElementText(4, cc.color.GREEN, 255, "And green. ", "Helvetica", 10);
var re5 = new ccui.RichElementText(5, cc.color.RED, 255, "Last one is red ", "Helvetica", 10);

//图片
var reimg = new ccui.RichElementImage(6, cc.color.WHITE, 255, "res/common/icon.png");

//动画
ccs.armatureDataManager.addArmatureFileInfo("res/cocosui/100/100.ExportJson");
var pAr = ccs.Armature.create("100");
pAr.getAnimation().play("Animation1");

var recustom = new ccui.RichElementCustomNode(1, cc.color.WHITE, 255, pAr);
var re6 = new ccui.RichElementText(7, cc.color.ORANGE, 255, "Have fun!! ", "Helvetica", 10);
richText.pushBackElement(re1);
richText.insertElement(re2, 1);
richText.pushBackElement(re3);
richText.pushBackElement(re4);
richText.pushBackElement(re5);
richText.insertElement(reimg, 2);
richText.pushBackElement(recustom);
richText.pushBackElement(re6);

richText.x = 100;
richText.y = 100;

this.addChild(richText);

源引：http://www.tuicool.com/articles/RVFRRb