CocosCreator之RichText富文本

>>>>>

官方文档：RichText 组件参考 · Cocos Creator

富文本优缺点

优点：自定义颜色，大小，描边，还能加图片。对于复杂的文本表现力更好。

缺点：cocos的富文本是由Label组件拼装实现的。低版本会打断合批。Label太多导致卡顿。

 

此处仅测试几个常用标签：

// 换行符


// 加粗
 
// 字体颜色
 
// 描边颜色及宽度
 
// 图片【需要在编辑器拉入所需图集】

// 字体大小
字体大小

举例：

请点击下方按钮兑换金币

组件理解：

max_width：0必须手动换行，否则指定宽度，自动换行。

line_height：行高

image_atlas：富文本要用到的图片的图集

 富文本API摘抄自官方d.ts

	/** !#en The RichText Component.
	!#zh 富文本组件 */
	export class RichText extends Component {		
		/** !#en Content string of RichText.
		!#zh 富文本显示的文本内容。 */
		string: string;		
		/** !#en Horizontal Alignment of each line in RichText.
		!#zh 文本内容的水平对齐方式。 */
		horizontalAlign: macro.TextAlignment;		
		/** !#en Font size of RichText.
		!#zh 富文本字体大小。 */
		fontSize: number;		
		/** !#en Custom System font of RichText
		!#zh 富文本定制系统字体 */
		fontFamily: string;		
		/** !#en Custom TTF font of RichText
		!#zh  富文本定制字体 */
		font: TTFFont;		
		/** !#en Whether use system font name or not.
		!#zh 是否使用系统字体。 */
		useSystemFont: boolean;		
		/** !#en The cache mode of label. This mode only supports system fonts.
		!#zh 文本缓存模式, 该模式只支持系统字体。 */
		cacheMode: Label.CacheMode;		
		/** !#en The maximize width of the RichText
		!#zh 富文本的最大宽度 */
		maxWidth: number;		
		/** !#en Line Height of RichText.
		!#zh 富文本行高。 */
		lineHeight: number;		
		/** !#en The image atlas for the img tag. For each src value in the img tag, there should be a valid spriteFrame in the image atlas.
		!#zh 对于 img 标签里面的 src 属性名称，都需要在 imageAtlas 里面找到一个有效的 spriteFrame，否则 img tag 会判定为无效。 */
		imageAtlas: SpriteAtlas;		
		/** !#en
		Once checked, the RichText will block all input events (mouse and touch) within
		the bounding box of the node, preventing the input from penetrating into the underlying node.
		!#zh
		选中此选项后，RichText 将阻止节点边界框中的所有输入事件（鼠标和触摸），从而防止输入事件穿透到底层节点。 */
		handleTouchEvent: boolean;	
	}

整理不易，关注收藏不迷路。

目录：CocosCreator经典笔记_神兽白泽-CSDN博客

笔者qq、微信：1302109196

qq群：415468592

>>>>>