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

相关推荐
数字冰雹2 分钟前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
李明卫杭州8 分钟前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-26 分钟前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx1 小时前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡
C+ 安口木1 小时前
CSS通用优惠券样式
前端·css
小趴菜82271 小时前
安卓人机验证View
android·java·前端
闲人编程2 小时前
2025年,如何选择Python Web框架:Django, Flask还是FastAPI?
前端·后端·python·django·flask·fastapi·web
光影少年2 小时前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
Aoda2 小时前
企业级项目结构设计的思考与实践 —— 以 PawHaven 为例
前端·架构
若无_2 小时前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js