Canvas Editor 项目中 RTL 文本下划线优化的技术方案

背景介绍

在 Canvas Editor 这个基于 Canvas 的富文本编辑器项目中，文本渲染是一个核心功能。随着项目发展至 0.9.98 版本，团队发现了一个关于从右到左(RTL)文本排版时下划线(strikeout)和删除线(underline)渲染的问题。

问题本质

问题的根源在于文本绘制方案的选择。最初的设计采用"按元素绘制"的方式，即逐个文本元素进行渲染。这种方式在处理 RTL 文本时会导致下划线和删除线的位置计算不准确，因为单个元素的坐标没有考虑整行的排版布局。

技术挑战

1. 坐标计算时机问题：下划线和删除线的位置依赖于元素在行中的最终位置，但RTL文本需要二次排序
2. 渲染顺序冲突：单个元素的绘制与整行重排后的坐标计算存在时序矛盾
3. 性能考量：从逐个元素绘制改为整行绘制需要考虑性能影响

解决方案

经过技术分析，团队决定采用以下优化方案：

绘制方案重构

将文本绘制方案从"按元素绘制"改为"按行绘制"。这种改变意味着：

1. 先收集整行的所有文本元素
2. 对RTL文本进行必要的重排序
3. 计算所有元素在行中的最终位置
4. 最后统一进行绘制操作

下划线绘制优化

针对下划线和删除线的特殊处理：

1. 延迟计算：将下划线坐标的计算推迟到整行排版完成后
2. 位置重映射：根据重排后的元素位置重新计算下划线的起止坐标
3. 统一绘制：在行绘制阶段统一处理所有装饰线，而非分散在各元素绘制中

实现细节

在具体实现上，主要修改了以下部分：

1. 渲染队列管理：重构了文本渲染队列的数据结构，支持行级别的操作
2. 坐标重计算：添加了行结束时的坐标重计算逻辑
3. 装饰线绘制：将underline和strikeout的绘制逻辑从元素级别提升到行级别
4. 性能优化：通过批处理减少Canvas API调用次数

技术价值

这一优化带来了多方面的改进：

1. 正确性：确保了RTL文本下各种装饰线的正确定位
2. 一致性：统一了LTR和RTL文本的渲染流程
3. 可维护性：简化了装饰线的绘制逻辑
4. 扩展性：为未来支持更多文本装饰效果奠定了基础

总结

Canvas Editor 项目通过这次重构，不仅解决了RTL文本下划线渲染的问题，还优化了整个文本渲染架构。这种从"元素中心"到"行中心"的思维转变，体现了对复杂文本排版场景的深入理解，也为后续的功能扩展提供了更清晰的技术路径。