cocos2d-js RichText使用

最新推荐文章于 2023-07-17 11:03:00 发布

shangdibaozi

最新推荐文章于 2023-07-17 11:03:00 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：游戏编程文章标签： cocos2d-js 富文本 RichText

本文链接：https://blog.youkuaiyun.com/shangdibaozi/article/details/52994048

游戏编程专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在富文本中设置不同颜色文字的方法，通过解析包含颜色标记的文本，并使用特定的富文本元素来实现文字颜色的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：显示这样的一段文字

1.黑色，<font color='#ff2211'>随便填的颜色</font>黑色。\n2.第二行了<font color='#ee2211'>随便填的颜色</font>

其中的font标签用来包裹要用其他颜色显示的文字。

实现：

addRichText: function(content) {
		var richText 	= new ccui.RichText();		// 富文本控件
		var lines 		= content.split("\n");		// 所有行
		for(var i = 0; i < lines.length; i++) {
			var line = lines[i];					// 待处理的行
			var elemts = line.split(/<font color='(.*?)'>(.*?)<\/font>/);	// 按正则模板对行进行分割
			var color = cc.color.BLACK;				// 默认颜色
			for(var k = 0; k < elemts.length;) {
				var e = elemts[k];
				if(e[0] == "#") {
					color = cc.color(e);
					e = elemts[k + 1];
					k += 2;
				} else {
					color = cc.color.BLACK;
					k++;
				}
				var re = new ccui.RichElementText(i, color, 255, e, "res/ui/Font/zhunyuan.ttf", 30); // 符文本元素
				richText.pushBackElement(re);
			}
			var re = new ccui.RichElementText(i, color, 255, "\n", "res/ui/Font/zhunyuan.ttf", 30); // 换行
			richText.pushBackElement(re);
		}
		var detail_panel = this.rootUINode.getChildByName("detail_panel_1");
		detail_panel.addChild(richText);
		richText.ignoreContentAdaptWithSize(false);
		richText.width = 455;
		richText.height = 500;
		richText.setAnchorPoint(cc.p(0.5, 0.5));
		richText.setPosition(cc.p(detail_panel.getContentSize().width / 2, detail_panel.getContentSize().height / 2));
	}