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

短命女 2022-08-03 00:29 375阅读 0赞

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