Canvas 的性能卓越,用它解决一个棘手问题

很早以前就写过一篇文章说明 canvas 计算文字宽高的文章,但是当时理解并没有那么深入,直到最近解决一个棘手的问题:思维导图文字显示不全问题。

简单复现场景:

  1. Windows 下的浏览器(edge、chrome 均可)编辑思维导图节点文字

  2. Mac 上查看该思维导图节点就会出现文字显示不全

技术上的说明:

  1. 当前文字宽高计算是在文字编辑过程中计算的,使用 canvas 计算文本宽高

  2. 文字宽高存在思维导图节点数据上,渲染的时候直接使用

  3. 「文字编辑过程中计算」是导致这个问题的根本原因,不同操作系统的文字排版方式不同 + 不同操作系统上的浏览器默认字体不同,导致即使同时 Chrome 浏览器并且都是用 canvas 计算方案得到的结果也是无法兼容的,windows 下计算的文字宽度明显小于 mac 下的文字宽度

  4. 最终导致 Windows 浏览器上编写的思维导图在 Mac 上无法正常展示,Mac 浏览器上编写的思维导图在 Windows 上正常

解决方案:

  1. 渲染时基于 canvas 重新计算文字宽高,相当于渲染是基于当前电脑的浏览器环境重新计算,这样不会有任何兼容性问题

  2. 引入简单的缓存,已经计算过的文本直接读缓存

  3. 最初担心性能问题,测试发现不同样本的数据每计算 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

相关推荐
飞翔的佩奇几秒前
【完整源码+数据集+部署教程】【运动的&足球】足球比赛分析系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球比赛分析系统
支付宝体验科技4 分钟前
SEE Conf 2025:开启体验科技的新十年
前端
TeamDev5 分钟前
使用 Shadcn UI 构建 C# 桌面应用
前端·后端·.net
尘世中一位迷途小书童32 分钟前
Vuetify Admin 后台管理系统
前端·前端框架·开源
参宿732 分钟前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js
2301_8012522239 分钟前
前端框架Vue(Vue 的挂载点与 data 数据对象)
java·前端·javascript·vue.js·前端框架
资讯第一线1 小时前
《Windows Server 2022》 [2025年10月版 ] [官方IOS] 下载
前端
非凡ghost1 小时前
EaseUS Fixo(易我视频照片修复)
前端·javascript·后端
非凡ghost1 小时前
Avast Cleanup安卓版(手机清理优化)
前端·javascript·后端
豆苗学前端1 小时前
长时间不操作自动退出登录(系统非活跃状态下自动登出机制的企业级设计方案)
前端·后端·面试