quick版的richlabel

Cocos2d-x Lua
#1

一直在犹豫她是否入得各位看官的眼，怀着忐忑不安的心情。手一抖提交了…
目前该版本支持的功能：
1、图文混排 2、多彩文字混排 3、支持局部单击事件 4、支持局部文字 图片的动画效果自定义5、支持标签内嵌
6、支持自动换行 7、支持设置行间距
该版本待完善功能
1、暂不支持特殊标记如换行等 2暂不支持多层标签嵌套 3暂不支持大小字号混排
它的用途
用于聊天系统、公告或装备描述性文本块

特别说明
虽然它还不完美但他目前基本能够满足我们游戏的需求啦
为了节约解析成本，个别地方用到了一些取巧的办法，具体请慢慢体会哦。如何使用以及一些细节我会陆续更新在这里。
当然也希望大家可以对这个猛喷啦 用过之后请回来这里提出自己的思路、看法以及感悟哦。让我们共同做一个很好很实用的
richlabel吧。话不多提了，请下载代码自己玩玩吧。感兴趣的可以自己动手改改哦
调用非常方便

很多朋友反馈说，第一版的richlabel很卡，确实非常抱歉。所以我更新了第二版给大家使用。
优化说明：
1、 优化了解析过程，减少了在计算宽度时的渲染成本。
local m_pobTexture = CCTexture2D:create()
m_pobTexture:initWithString(v, font, tsize) 其中 CCTexture2D的create()接口需要自己导出。
2、 local json = require(“framework.json”)
字符串格式解析目前兼容了json来提高性能。
3、 解决了朋友在下面提到的一些解析错误。
总之不卡啦！！！
特别说明：
马上要升级到3.3的版本了，所以其它的功能暂时没有花时间来改进它。
我提供给大家的只是一个方向，大家可以给他加上很多更强大更方便的功能或者接口，
期待你们可以做出自己的richlab哦。
请大家下载下面的第二版（2.2.6创建的工程），使用吧。

l

#2

最初的设想:
能自动换行、字体多彩混排、简单的图文混排、局部点击(主要用于点击某个装备名字可以弹出界面查看装备介绍等)
策划只需要在表里填写一段根据约定的规则填写的字符串，就可以new一个公告或者什么的
实现思路:
前言：基于pushbutton做了一些必要的封装
根据字符串解析方法，取出文字、图片名以及一些必要的参数并将这些数据存入一个tab中
简单的封装一下格式方便使用
initData(str, font, fontSize, rowWidth)
完成字符串的解析(如果你们要扩展或者改写请在这里修改)
parseString(str, param)
一个是纯字符表一个是用于渲染的表
ptab, copyVar
ptab 的作用是在将该控件用于滚屏公告时，统计字符数目方便滚屏完毕及时做移除操作
copyVar 附带了一些必要属性
就做了一件事儿，将一些必要的属性正确的存入每个小块的tab中
tab_addtext(var) 和 addDataToRenderTab(copyVar, tab, text, index, current)
创建pushbutton
tab_createButton(params)
当时本着尽量减少解析成本和不改动底层的想法
让文字能够左对齐所以你们可以看到这句话
btn:setButtonLabelAlignment(display.TOP_LEFT)
event.target:getButtonLabel(“normal”):setPosition(ccp(0, 0))
为了减少绘制成本所以直接用了一个1*1像素的透明图片wsk.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
写这个的目的
看到回复，我很激动的发现有朋友已经将它用于自己的项目了。我真的很开心，我把自己的实现思路写出来希望
你们可以将它雕琢一番，以便能真正适用于你们自己的项目中。如网友提到的html标签库、每行根据图片最大高
度和设置的高度取大，来设置每行的行高。确实，官方目前就是这么做的吧。然后图文混排的问题就来啦。其实吧
我是想偷懒所以将一个表情限制为一个汉字的宽高，不过你们完全可以对这个缺点进行修改。当然啦，我也正在完
善并用一些新的做法来改进它。

#3

– 拆分出单个字符
function RichLabel:tab_cutText(str)
local list = {}
local len = string.len(str)
local i = 1
while i <= len do
local c = string.byte(str, i)
local shift = 1
if c > 0 and c <= 127 then
shift = 1
elseif (c >= 192 and c <= 223) then
shift = 2
elseif (c >= 224 and c <= 239) then
shift = 3
elseif (c >= 240 and c <= 247) then
shift = 4
end
local char = string.sub(str, i, i+shift-1)
i = i + shift
table.insert(list, char)
end
return list, len
end

– 获取一个格式化后的浮点数
local function str_formatToNumber(number, num)
local s = “%.” … num … “f”
return tonumber(string.format(s, number))
end

– string.split()
function RichLabel:strSplit(str, flag)
local tab = {}
while true do
local n = string.find(str, flag)
if n then
local first = string.sub(str, 1, n-1)
str = string.sub(str, n+1, #str)
table.insert(tab, first)
else
table.insert(tab, str)
break
end
end
return tab
end

–解析16进制颜色rgb值]]
function RichLabel:GetTextColor(xStr)
if string.len(xStr) == 6 then
local tmp = {}
for i = 0,5 do
local str = string.sub(xStr,i+1,i+1)
if(str >= ‘0’ and str <= ‘9’) then
tmp = str - ‘0’
elseif(str == ‘A’ or str == ‘a’) then
tmp = 10
elseif(str == ‘B’ or str == ‘b’) then
tmp = 11
elseif(str == ‘C’ or str == ‘c’) then
tmp = 12
elseif(str == ‘D’ or str == ‘d’) then
tmp = 13
elseif(str == ‘E’ or str == ‘e’) then
tmp = 14
elseif(str == ‘F’ or str == ‘f’) then
tmp = 15
else
print(“Wrong color value.”)
tmp = 0
end
end
local r = tmp * 16 + tmp
local g = tmp * 16 + tmp
local b = tmp * 16 + tmp
return ccc3(r,g,b)
end
return ccc3(255,255,255)
end

#4

– 全角 半角string.len()
function RichLabel:accountTextLen(str, tsize)
local font = self.font
local list = self:comminuteText(str)
local aLen = 0
for k,v in pairs(list) do
local a = string.len(v)
local m_pobTexture = CCTexture2D:create()
m_pobTexture:initWithString(v, font, tsize)
local width = m_pobTexture:getContentSize().width
a = tsize / width
local b = str_formatToNumber(ChineseSize / a, 4)
aLen = aLen + b
m_pobTexture:release()
end
return aLen
end
这里根据每个字符渲染的宽度做了一个预算，但请注意仅仅只做一个预算。
如果朋友们想通过其他的做法来更精确的计算宽度。请查阅2dx引擎，另外用2.2.5以下的朋友完全可以做无痛升级的说。

#5

mark mark 赞

#6

:2: mark :2:

#7

赞一个！为啥就感觉998这个参数很喜感。。 全场998，只要998 :10:

#8

必须赞~~~~~~~~~~~~~~~~~~~~~~

#9

:2: :2:

#10

真的很不错啊

#11

:2: :2: :2: :2: :2: :2: :2: :2:

#12

谢谢支持呀 :7::7::7: 要不考虑下放到quick demo里边 :14::14::14:

#13

真的很不错啊 .赞个

#14

大赞！:2::2:

#15

看者功能描述感觉比cocos2dx 3.x版本的好很多。:2::2::2::2::2::2::2::2:

#16

实用 点赞:2:

#17

很好很强大，希望能整合进引擎中。

不过如果要整合进引擎中，那个setClilckEventListener函数，有个字符写多了，希望去掉写成setClickEventListener。

#18

可以写一个demo pr 到 官方 github

#19

好的吧， 等大家用一段时间啦 ， 稳定了 我就pr一个啦 。 如16楼说的这种问题，这个是我一个人写的呢 ，难免遗漏一些， 嘿嘿， 莫怪 、莫怪。

#20

效果不错~给32个赞~:14: