讲师中心 微信公众号
AI工具推荐 视频效率加速

C++ 游戏UI中怎么手写富文本(RichText)解析与图文混排排版

落辰同学_6584

落辰同学_6584

发布时间:2026-10-25 07:23:42

|

178人浏览过

|

来源于php中文网

原创

不能直接用std::string拼接富文本标签,因为富文本是带语义的结构化数据,需解析为节点树(如TextSpan、ImageSpan)以支持样式嵌套、精准排版与高效交互,而非简单字符串操作。

c++ 游戏ui中怎么手写富文本(richtext)解析与图文混排排版

为什么不能直接用 std::string 拼接富文本标签

因为富文本本质是带语义的结构化数据,不是纯字符串。你用 std::string 存 "<color>HP:</color><value>"</value>,后续想改某个 color 属性、提取所有图片占位符、或计算某段文字实际像素宽高时,就得反复正则匹配+子串切分——性能差、易出错、无法嵌套。

真正要做的,是把原始文本解析成节点树(比如 TextSpan、ImageSpan、StyleSpan),每个节点携带样式、尺寸、绘制逻辑。这样排版时遍历一次树即可累积宽度,点击响应也能精确到某个 Span。

常见错误现象:
– 文字换行后图标错位(没把 ImageSpan 当作“等高字符”参与行高计算)
– 颜色嵌套失效(<color>外<color>内</color>外</color> 解析成扁平列表,丢失嵌套关系)
– 中英文混排时,font_metrics::get_advance() 返回值对中文全角字符不准确(没按 Unicode 字符而非 UTF-8 字节计数)

怎么设计轻量级解析器:避开 XML/HTML 完整语法

游戏 UI 不需要支持 <script> 或 DTD,只需处理有限标签:color、size、img、br、sub。手写一个单次遍历状态机比引入 TinyXML 更快更可控。

立即学习“C++免费学习笔记(深入)”;

C++14
C++14

C++14 对 C++11 的修正与增强版本,适合旧系统维护和较老工具链兼容。

下载
  • 用 std::vector<std::shared_ptr<Span>> 存解析结果,避免深拷贝
  • 遇到 <img src="icon_hp.png" w="16" h="16"> 时,立即加载纹理句柄并缓存到全局资源池(别等到绘制时才加载)
  • 属性值统一用双引号包裹,不支持单引号或无引号——省去词法分析歧义
  • 忽略非法闭合标签(如 </size> 前没有对应 <size>),只按开标签生效,避免栈失衡

示例解析逻辑片段:

while (pos < text.length()) {
  if (text[pos] == '<' && text.find('>', pos) != std::string::npos) {
    auto end = text.find('>', pos);
    auto tag = parse_tag(text.substr(pos+1, end-pos-1)); // 提取 name+attrs
    if (tag.name == "img") spans.push_back(std::make_shared<ImageSpan>(tag.attrs));
    pos = end + 1;
  } else {
    spans.push_back(std::make_shared<TextSpan>(extract_text_run()));
    pos++;
  }
}

图文混排排版的关键三步:基线对齐、行高统合、换行断点

图像不是文字,但用户感知上它该和周围文字“站同一排”。核心是把 ImageSpan 的绘制原点设为当前行基线(baseline)位置,而不是左上角。

  • 每行高度 = max(所有 TextSpan 的 font_metrics::line_height, 所有 ImageSpan 的 height)
  • ImageSpan 的 y 偏移 = 行 baseline - ImageSpan::height * 0.25(典型值,需根据美术规范微调)
  • 换行不能切断 <img> 或 <color> 标签内部;断点只允许在 TextSpan 的空格、标点或强制 <br> 处
  • 使用 FT_Get_Advance()(FreeType)或 IDWriteFontFace::GetDesignGlyphMetrics()(DirectWrite)获取真实字宽,别用字体字号简单乘法估算

运行时性能陷阱:哪些操作必须预计算

每一帧都重新解析、测量、布局,UI 会掉帧。必须拆离“可变”与“不变”部分。

  • 解析结果(Span 树)和样式属性(颜色、字号)可缓存,只要原始字符串没变就复用
  • 每种字体+字号组合的字符度量表(advance width)应预先构建哈希表:std::map<std::pair<FontID, int>, std::unordered_map<char32_t, float>>
  • 图片 Span 的纹理尺寸在加载时就转成像素值存入节点,避免每次排版都查 GPU 纹理对象
  • 不要在布局循环里调用 std::to_string() 或 std::regex —— 这些是帧率杀手

最容易被忽略的是:不同语言的换行规则差异。中文可以任意字间断行,英文需按单词,日文还有「禁则处理」。如果 UI 要支持多语言,TextSpan::break_opportunities() 必须按 locale 分支实现,不能只依赖空格。

相关文章

在线游戏
在线游戏

海量精品小游戏合集,无需安装即点即玩,休闲益智、动作闯关应有尽有,秒开即玩,轻松解压,快乐停不下来

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
c++和c语言的区别有哪些
c++和c语言的区别有哪些

c++和c语言的区别:1、面向对象编程(OOP)支持不同;2、新增特性不同;3、标准库不同;4、编译方式不同;5、命名空间不同等等。想了解更多c++的相关内容,可以阅读本专题下面的文章。

2248

2024.03.14

c++和python学习顺序推荐
c++和python学习顺序推荐

一般建议先学习C++,再学习Python,因为这样可以逐步从较为底层的编程语言向更高级的语言过渡。想了解更多python的相关内容,可以阅读本专题下面的文章。

1039

2024.03.14

python和c++学习性价比分析
python和c++学习性价比分析

Python易于学习,广泛应用于Web开发、数据科学和人工智能等领域,但性能较低。C语言性能高,适用于对性能要求较高的场景,如游戏开发和系统编程,但学习曲线陡峭,错误处理复杂。想了解更多python的相关内容,可以阅读本专题下面的文章。

447

2024.03.14

c语言和c++一样吗
c语言和c++一样吗

c语言和c++是两种不同的编程语言,虽然有相似之处,但存在显著差异。c语言专注于过程式编程和系统级开发,以简洁、高效著称。c++作为c语言的超集,引入了面向对象编程,增强了代码组织和管理能力,但学习曲线也更陡峭。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

327

2024.03.14

c语言和c++先学哪个好
c语言和c++先学哪个好

初学者选择学习c语言还是c++语言,需要根据个人学习目标、背景以及编程兴趣和预期应用方向来决定。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

426

2024.03.14

c语言和c++的区别和联系
c语言和c++的区别和联系

c语言和c++是计算机科学领域应用广泛的编程语言。虽然它们有着相似的基础,但它们在语言类型、语法功能和内存管理方面存在着显著差异。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

600

2024.03.14

c++软件中文更改教程
c++软件中文更改教程

对于 ide,可通过打开设置,找到语言设置,选择中文,并保存更改。对于非 ide 应用程序,可查找设置或选项,选择语言设置,更改为中文,并保存更改。想了解更多c++的相关内容,可以阅读本专题下面的文章。

1409

2024.03.21

python和java和c++学习性价比分析
python和java和c++学习性价比分析

Python以其易学性、丰富的库和活跃的社区而著称,适合数据科学、人工智能和Web开发。Java以其跨平台性、企业级应用开发和Android应用开发而闻名。C++以其底层控制能力、高效性能和游戏开发而著称。选择哪种语言取决于个人兴趣、职业方向和特定需求。想了解更多python和java和c++的相关内容,可以阅读本专题下面的文章。

1217

2024.03.22

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

20

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
C++教程
C++教程

共115课时 | 43.4万人学习

Conan 2 Essentials 免费课程
Conan 2 Essentials 免费课程

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn