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。 
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。