很早以前就写过一篇文章说明 canvas 计算文字宽高的文章，但是当时理解并没有那么深入，直到最近解决一个棘手的问题：思维导图文字显示不全问题。
简单复现场景：
-
Windows 下的浏览器（edge、chrome 均可）编辑思维导图节点文字
-
Mac 上查看该思维导图节点就会出现文字显示不全
技术上的说明：
-
当前文字宽高计算是在文字编辑过程中计算的，使用 canvas 计算文本宽高
-
文字宽高存在思维导图节点数据上，渲染的时候直接使用
-
「文字编辑过程中计算」是导致这个问题的根本原因，不同操作系统的文字排版方式不同 + 不同操作系统上的浏览器默认字体不同，导致即使同时 Chrome 浏览器并且都是用 canvas 计算方案得到的结果也是无法兼容的，windows 下计算的文字宽度明显小于 mac 下的文字宽度
-
最终导致 Windows 浏览器上编写的思维导图在 Mac 上无法正常展示，Mac 浏览器上编写的思维导图在 Windows 上正常
解决方案：
-
渲染时基于 canvas 重新计算文字宽高，相当于渲染是基于当前电脑的浏览器环境重新计算，这样不会有任何兼容性问题
-
引入简单的缓存，已经计算过的文本直接读缓存
-
最初担心性能问题，测试发现不同样本的数据每计算
1000次宽高平均花费的时间在5ms，这个开销完全可接受，甚至算高效
总结：
其实文字显示不全的问题困扰我们好久，大概拖了好几个月，中间用过非常蹩脚的办法（显示不全时出现滚动条，这个体验很差），一直因为担心性能问题、没有明确的复现路径等导致没有解决，下定决定基于 canvas 动态计算也是因为仔细研究了「语雀」的方案，发现它在不同的系统上渲染的文字宽高确实不同，然后又测试下 canvas 的性能表现，发现这个方案基本上很完美。
> 大家对于开源白板、开源思维导图感兴趣，可以关注、了解 Drawnix: GitHub - plait-board/drawnix: 开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.
> 对思维导图、白板、画笔工具有使用需求可直接访问 drawnix.com。