FlexNote 的白板基于 Canvas 。
卡片、连线、图形之外,卡片内的内容同样由 Canvas 绘制,而不是为每张卡片挂载一块 HTML 。
这一选择主要出于性能。白板上往往同时存在大量卡片,再叠加平移与缩放。若每张卡片都走 DOM 排版,开销会随内容复杂度迅速放大。将内容纳入同一套 Canvas 渲染,才能把整张白板当作一个可缩放的场景来处理。
真正难的是:画布上要画的不只是一段字。
同一套渲染需要覆盖常见笔记结构:标题、加粗斜体、高亮、列表、表格、代码块、引用、mention 。还要兼容公式、图片、思维导图,以及 Mermaid / Markmap 这类图示。
卡片里可以再嵌卡片,PDF 高亮、音视频、网站剪藏也会出现在同一块画布上。它们的尺寸、对齐、层级各不相同,却要在缩放、拖拽时保持同一套视觉比例。
这些在 DOM 里大多有现成方案。Canvas 没有浏览器的排版和组件树,断行、占位、混排都要自己处理。公式和图片是异步到达的,未就绪时高度未知,到位后卡片会被撑开,周围的思维导图、连线、嵌套内容都要跟着走。多种格式挤在同一张卡片里时,任何一种算错,...