文字自动换行 -- Cocos2d-HTML5
来源:互联网 发布:图片批量下载软件 编辑:程序博客网 时间:2024/05/17 05:52
某次使用 Cocos2d-HTML5 时发现,通过 cc.LabelTTF 显示的文本即使宽度超过了预设值,也不会自动换行。上网搜了下,很多人都遇到了同样的问题。
之前用 Cocos2d-x 的 CCLabelTTF 没这个问题。看了下代码,在 iOS 平台上, CCLabelTTF 最终是调用 UIStringDrawing 的 drawInRect 函数,而这个函数支持设置 lineBreakMode,也就是换行模式。
接着再看 Cocos2d-HTML5 里的 CCLabelTTF.js,发现 _updateTTF 这个函数里其实有换行逻辑,但是只处理了空格和 \n 换行:如果一行文本太长,会在最近的空格处换行;\n 则是用来强制换行的。这个策略对于英文这种单词之间有空格的语言来说是够用,但是对于中文就不合适了。
如果在创建 LabelTTF 时,字符串已按照指定宽度插入 \n 强制换行,那最终的展现结果就是我想要的。由于文本包含中文、英文、数字和符号,又很少使用等宽字体。所以要确定指定的宽度能显示多少字符,除了不断尝试没什么好办法。
首先,我们需要获取指定文本的宽度,可以通过创建一个临时 LabelTTF 来完成:
function getStrWidth(str, fontName, fontSize) {
var tmpLabel = cc.LabelTTF.create(str, fontName, fontSize);
return
tmpLabel.getContentSize().width;
}
也可以用 measureText 来实现同样的功能(下面这个方案在 html5 和 iOS 的 jsb 环境都 OK,在 java 环境下会报错):
function getStrWidth(str, fontName, fontSize) {
cc.renderContext.font = fontSize +
"px "
+ fontName;
return
cc.renderContext.measureText(str).width;
}
接着,就可以循环插入 \n 了。大概思路是指定一个差不多的初始值 L(可以用指定宽度 width 除以字体大小),截出 0 到 L 位置的字符串,用 getStrWidth 计算宽度,如果比我们指定的宽度 width 大,L--,继续比较;否则 L++ 继续。直到 L 个字符宽度和我们指定宽度刚好相等(很小的概率),或者 L 个字符长度不够,但 L+1 长度又多了的情况下,可以确定这一行可以放这 L 个字符。然后继续处理下一行,直至字符串结束。
实际效果和实现见 Demo 和代码。理论上,如果中英文混排的时候,应该尽可能避免把英文单词拆开,这个 Demo 没处理这种情况。效率方面我测试了下,6000 个中英文字符串以 500px 宽度,16px 字号插入 \n,用第一种方法耗时 10 几 ms,第二种才几 ms,基本都可以忽略不计。
- 文字自动换行 -- Cocos2d-HTML5
- html5文字阴影与自动换行
- J2ME文字自动换行
- 文字自动换行
- div文字自动换行
- css 文字自动换行
- div 文字自动换行
- div 文字自动换行
- div文字自动换行
- 文字块自动换行
- 设置文字自动换行
- cocos2d-x文字换行问题
- CSS----表格文字自动换行
- android 画文字 自动换行
- iReport文字自动换行设置
- canvas的文字自动换行
- iOS UILabel文字自动换行
- CSS实现文字自动换行
- Qt5.3.1 Mingw32 编译oracle 11g 驱动
- java4android第四十五集hashcode()与tostring()
- gdb insight 无法连接 jlink gdbserver
- poj 3858: 和数
- 4、Spring_Security_安全权限管理手册
- 文字自动换行 -- Cocos2d-HTML5
- Hadoop Map/Reduce教程
- 如何在ios app 局域网内搜索到设备
- poj 3711: 字符串移位包含问题
- VC 在经典 MFC 框架下使用真彩色工具栏
- 2-2. 然后是几点(15)
- servlet与Struts action线程安全问题分析!
- 项目管理随想
- 关闭iptables