Canvas 计算文字宽高性能高效，解决了开源项目中的一个棘手问题！

很早以前就写过一篇文章说明 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。 
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！