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