开源白板工具 Excalidraw 架构解读

这篇具有很好参考价值的文章主要介绍了开源白板工具 Excalidraw 架构解读。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文讲解开源白板工具 Excalidraw 的架构设计。

版本 0.16.1

技术栈

Vite + React + TypeScript + Yarn + Husky。

脚手架原来是用的是 Create React App,但这个脚手架已经不维护了,一年多没发布新版本了。

目前市面上比较流行的 React 脚手架是 Vite,所以几个月前 Excalidraw 把脚手架替换为了 Vite,很合理。

使用了 React 去实现 UI 层,国外还是 React 流行一些。

TypeScript 用于类型标注,减少一些类型错误。

Yarn 是包管理器,没有使用 monorepo。

Husky 是 git hook 库,会在本地 git commit 做一些校验。

架构设计

模块耦合比较严重,基本核心逻辑都放在 App 类组件里,导致其所在的 App.tsx 文件行数达到 8000+ 行。

数据状态大多保存在 App 类组件的 state 属性中。

开源白板工具 Excalidraw 架构解读,开源,架构,图形编辑器

可以看到,编辑器的内核和 UI 是强绑定的,完完全全耦合在一起了。

如果你想把这个项目的 UI 层改成基于其他框架,比如 Vue,那基本是要重写了。

但一些复杂的方法也是会抽离出来放到一个单独的文件里,比如 group.js 里放的都是和编组相关的逻辑,但使用的是函数风格,里面全是零散的函数,没有使用面向对象的写法。

渲染方案

Excalidraw 选择了 Canvas 2D 渲染方案。

Canvas 2D 的优点是 API 做了高级封装,对开发者非常友好,缺点是其并不是为了高性能而设计的,很多底层图形计算是基于 CPU,不能很好地利用 GPU 的并行计算能力。

一句话就是性能较差,但比 SVG 好。

图形库使用了开源库 rough,一款基于 Canvas 2D 和 SVG 的手绘风图形库。

图形工具

this.state.activeTool.type 会记录当前使用的是哪个工具。

工具没有抽成类,它们的逻辑混合写在鼠标事件响应函数 handleCanvasPointerDown、handleCanvasPointerMove、handleCanvasPointerUp 中。

完全耦合在一起了。

如果我来做,我会抽一个工具管理类,然后实现各种工具类,把它们注册到工具管理类里。

开源白板工具 Excalidraw 架构解读,开源,架构,图形编辑器

这样写维护性非常差,你要改某一个工具,比如创建矩形的逻辑,你不得不看其他工具的逻辑,要从这一坨分支里面找到创建矩形操作会走的逻辑。

图形树

图形树的状态保存在 Scene 类中:

  • nonDeletedElements:一个拍平的图形元素数组;
  • elements:历史创建的所有图形,被删除的图形还能在这里找到。

有组的概念,图形对象的 groupIds 数组属性表示当前元素在哪些组下。

渲染

渲染图形树的入口方法是 renderStaticScene。

会顺序递归图形树的图形,将它们渲染出来。

没有使用脏矩形局部渲染。

图形拾取方案

图形拾取使用了几何法

不同图形的的渲染逻辑的判断逻辑是写在一起的。

历史记录

历史记录的逻辑在 History 类中。

Excalidraw 维护了两棵树,当图形树发生了变更时,会对一一比两棵树中图形的版本号。

如果相同,说明没发生变更,不添加新的历史记录项;否则,就创建一个历史记录项。

被更新的图形会拷贝一份,保存到 elementCache 里。

stateHistory 和 redoStack 记录的是整棵树的图形 id 和新的版本号,撤销重做时,会从中取出,去更新对应的图形为指定的版本。

国际化方案

国际化代码在 i18n.ts 文件中。

使用了状态管理库 jotai,去通知组件更新。

渲染性能优化

剔除, 视口外的图形不渲染,很基本的操作。

缓存, 图形到手绘风是需要计算的,Excalidraw 会把这个结果缓存下来,如果只是几何属性的改变,就能直接使用缓存可以减少计算量。

缩放进行防抖,延迟图形树的重渲染。

滚动事件频率很高,每一帧都重渲染,对于图形很多的情况下,Excalidraw 是吃不消的,因为 Canvas 2D 性能并不高,这时候可以考虑节流或防抖去减少重渲染的次数。

我们发现,通过滚轮放大画布时,Excalidraw 的图形是模糊的,鼠标释放时才真正重渲染。

结尾

Excalidraw 作为一款白板工具,功能很完善,美中不足的地方就是代码写得太面条。

本文透析了 Excalidraw 在图形编辑器上几个比较基础但很重要的功能,希望对你进行图形编辑器的架构有帮助。

我是前端西瓜哥,欢迎关注我,学习更多图形编辑器知识。文章来源地址https://www.toymoban.com/news/detail-738271.html

到了这里,关于开源白板工具 Excalidraw 架构解读的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Excalidraw:绘制图形的新利器

    Excalidraw是一款简洁设计、直观易用的绘图应用,用户可以通过它创建流程图、示意图、架构图等各种图形。除了提供手绘效果外,Excalidraw还支持多人实时协作编辑,并提供端到端加密以确保用户隐私和数据安全。在技术层面上,Excalidraw可以直接通过浏览器访问,也可以通过

    2024年03月19日
    浏览(39)
  • 图形编辑器开发:最基础但却复杂的选择工具

    大家好,我是前端西瓜哥。 对于一个图形设计软件,它最基础的工具是什么? 选择工具 。 但这个选择工具,却是相当的复杂。这次我来和各位,细说细说选择工具的一些弯弯道道。 我正在开发的图形设计工具的: https://github.com/F-star/suika 线上体验: https://blog.fstars.wang/ap

    2024年02月09日
    浏览(67)
  • 老牌开源 SVG 编辑器 SVGEdit 是如何架构的?

    大家好,我是前端西瓜哥。这次简单看看 SVGEdit 的架构。 SVGEdit 的版本为 7.2.0。 SVGEdit 一款非常老牌的 SVG 图形编辑器,用于编辑处理 SVG,start 数目前是 5.8k。 它的优点在于经过多年的开发,完成度高,较为成熟,功能相当丰富 。 有丰富的工具:选择工具、铅笔工具、钢笔

    2024年02月03日
    浏览(44)
  • LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架,用于 web 端在线图形设计、图表、白板、数据可视化等场景

    最近想做一个轻巧的在线画册和海报设计工具,最近发布的 LeaferUI 特别适合这样的场景。 LeaferUI 是什么? Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架,帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎,在 web 上绘图性能非

    2024年02月13日
    浏览(65)
  • APS开源源码解读: 排程工具 frepple

    https://github.com/frePPLe/frepple/tree/master 关键在于理解buffer的含义以及操作。 有consumer和producing, 数量有正负 Identify Critical Paths: Start by identifying the critical paths in your scheduling process. Critical paths are sequences of tasks that have the least flexibility in terms of start times. These paths are essential to meetin

    2024年02月05日
    浏览(35)
  • 15.3K Star,超好用的开源协作式数字白板:tldraw

    大家好,我是TJ 今天给大家推荐一个开源协作式数字白板: tldraw 。 tldraw的编辑器、用户界面和其他底层库都是开源的,你可以在它的开源仓库中找到它们。它们也在NPM上分发,提供开发者使用。您可以使用tlDraw为您的产品创建一个临时白板,或者将其作为构建自己应用的工

    2024年02月09日
    浏览(39)
  • 图形编辑器开发:参考线吸附功能,让图形自动对齐

    最近我给图形编辑器增加了参照线吸附功能,讲讲我的实现思路。 我正在开发的图形设计工具: https://github.com/F-star/suika 线上体验: https://blog.fstars.wang/app/suika/ 效果是被移动的图形会参考周围图形,自动与它们进行吸附对齐。 不得不说,很酷炫。 感觉这个图形编辑器突然变

    2024年02月13日
    浏览(46)
  • 图形编辑器:历史记录设计

    大家好,我是前端西瓜哥。今天讲一下图形编辑器如何实现历史记录,做到撤销重做。 其实就是版本号的更替。每个版本保存一个状态。 要记录图形编辑器的历史记录,支持撤销重做功能,需要两个栈: 撤销(undo)栈和重做(redo)栈 。 每当用户进行一个操作(比如移动一

    2024年02月01日
    浏览(52)
  • 如何使用Docker搭建WBO在线协作工具并实现无公网IP远程编辑本地白板

    WBO在线协作白板是一个自由和开源的在线协作白板,允许多个用户同时在一个虚拟的大型白板上画图。该白板对所有线上用户实时更新,并且状态始终保持。它可以用于许多不同的目的,包括艺术、娱乐、设计和教学,使用起来也非常有趣。 下面结合cpolar内网穿透工具,实现

    2024年04月17日
    浏览(48)
  • 图形编辑器开发:以光标位置缩放画布

    大家好,我是前端西瓜哥。 画布缩放是图形设计工具中很重要的基础能力。 通过它,我们可以像举着一台摄影机,在图形所在的世界到处游逛,透过镜头,可以只看自己想看的图形;可以拉近摄影机,看到图形的细节;也可以拉远摄影机,总览多个图形之间的关系。 ok,那

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包