cocosLua 之 RichText(1)

news2024/10/6 18:22:53

结构

富文本主要通过RichText来实现, 其继承结构：

使用RichText主要通过封装的Element元素，进行插入而组合包含文本，图片等效果的富文本。这些元素主要有：

使用

在cocos2d-lua项目使用RichText主要通过代码创建，方式一般有两种：

通过Element元素进行创建
通过Xml进行创建

常用的一些方法接口有：

setVerticalSpace 设置文本垂直间隔
setFontSize 设置字体大小，该接口不会影响到内容自定义的字体大小
ignoreContentAdaptWithSize 是否忽略用户自定义组件的大小，true表示忽略
formatText 格式文本，会立即调用进行渲染; 注意首先调用该接口才能获取文本的大小高度等

使用Element创建的示例如下：

-- 参考CocosStudioGUITest.lua
self._richText = ccui.RichText:create()
self._richText:ignoreContentAdaptWithSize(false)
self._richText:setContentSize(cc.size(100, 100))

-- 创建文本元素
local re1 = ccui.RichElementText:create(1,cc.c3b(255,255,255),255,"white.","Helvetica",10)
local re2 = ccui.RichElementText:create(2,cc.c3b(255,255,0), 255,"yellow.","Helvetica",10)
local re3 = ccui.RichElementText:create(3,cc.c3b(0,0,255),255,"blue.","Helvetica",10)
local re4 = ccui.RichElementText:create(4,cc.c3b(0,255,0),255,"And green. ","Helvetica",10)
local re5 = ccui.RichElementText:create(5,cc.c3b(255,0,0),255,"red ","Helvetica",10)
-- 创建图片元素
local imgRes = "cocosui/sliderballnormal.png"
local reimg = ccui.RichElementImage:create(6, cc.c3b(255, 255, 255), 255, imgRes)
-- 创建动画元素
local armature = ccs.ArmatureDataManager:getInstance()
armature:addArmatureFileInfo("cocosui/100/100.ExportJson")
local arr = ccs.Armature:create("100")
arr:getAnimation():play("Animation1")
local recustom = ccui.RichElementCustomNode:create(1, cc.c3b(255, 255, 255), 255, arr)

-- 插入元素
self._richText:pushBackElement(re1)
self._richText:insertElement(re2, 1)
self._richText:pushBackElement(re3)
self._richText:pushBackElement(re4)
self._richText:pushBackElement(re5)
self._richText:insertElement(reimg, 2)
self._richText:pushBackElement(recustom)
self._richText:pushBackElement(re6)

self._richText:setPosition(cc.p(widgetSize.width/2, widgetSize.height/2))
self._richText:setLocalZOrder(10)
self._widget:addChild(self._richText)

使用Xml创建指定格式的富文本，需要设定指定的格式才能构建。

<!-- 字体相关 -->
<font face='#.ttf' size='24' color='#0000ff'>text</font>
<small>text</small>
<big>text</big>
<!-- 下划线 -->
<u>text</u>
<!-- 斜体 -->
<i>text</i>
<!-- 粗体 -->
<b>text</b>
<!-- 中划线 -->
<del>text</del>
<!-- 图片 -->
<img src='cocosui/sliderballnormal.png' width='30' height='30'/>
<!-- 链接 -->
<a href='http://www.google.com'>click me text </a>
<!-- 换行 -->
<br/>
<!-- 描边 需要ttf文件的支持 -->
<outline color='#D2B48C' size='2'>text</outline>
<!-- 阴影 -->
<shadow color='#4169E1' offsetWidth='8' offsetHeight='-8' blurRadius='2'>text</shadow>
<!-- 外发光 需要ttf文件的支持 -->
<glow color='#AFEEEE'>text</glow>

主要接口是：createWithXML

local content = "<font size='20' color='#0000ff'>这是</font>"
		.. "<font size='24' color='#0000ff'>xml富文本</font>"
    .. "<img src='Default/r2.png' width='30' height='30'/>"
    .. "<outline color='#D2B48C' size='4'><font face='fonts/arial.ttf' size='44' color='#FFFFFF'>outline</font></outline>"
    .. "<br/><a href='http://www.google.com'>click me text </a> "

local richText = ccui.RichText:createWithXML(content, {})
if not richText then 
    return 
end 

richText:setAnchorPoint(cc.p(0.5, 0.5))
richText:setPosition(cc.p(display.width*4/5 + 70, display.height/2))
self:addChild(richText)

在程序中使用富文本，如果内容有多行，获取高度的话，主要通过setContentSize/getContentSize

来设定。其示例：

function RichTextTest:AddRichTextDemo_3() 
    local bgSize = cc.size(300, 100)
    local bgLayout = ccui.Layout:create() 
    -- 设置背景颜色类型： 0.NONE 1.SOLID 2.GRADIENT
    bgLayout:setBackGroundColorType(ccui.LayoutBackGroundColorType.solid)                
    -- 设置背景颜色
    bgLayout:setBackGroundColor(cc.c3b(255, 255, 255))
    -- 设置透明度
    bgLayout:setBackGroundColorOpacity(180)
    bgLayout:setContentSize(bgSize)
    bgLayout:setAnchorPoint(cc.p(0, 1))
    bgLayout:setPosition(cc.p(display.width/2 - bgSize.width/2, display.height/4))
    self:addChild(bgLayout)

    local content = "<font size='20' color='#FFFFFF'>RichText</font>"
  		.. "<font size='24' color='#0000ff'>这是一段分行的富文本内容,这是一段分行的富文本内容,这是一段分行的富文本内容</font>"
    local richText = ccui.RichText:createWithXML(content, {})
    richText:setPosition(cc.p(0, bgSize.height))
    richText:setAnchorPoint(cc.p(0, 1))
    -- 设置文本垂直间隔
    richText:setVerticalSpace(2)
    -- 是否忽略用户自定义组件的大小, true表示忽略
    richText:ignoreContentAdaptWithSize(false)
    -- 设置大小，限定宽度
    richText:setContentSize(cc.size(bgSize.width, 0))
    -- 格式文本，会立即调用进行渲染; 注意首先调用该接口才能获取文本的大小高度等
    richText:formatText() 

    -- 重置大小
    local textSize = richText:getContentSize()
    bgLayout:setContentSize(cc.size(bgSize.width, textSize.height))
    richText:setPosition(cc.p(0, textSize.height))

    bgLayout:addChild(richText)
end