一、项目简介

开源免费的在线画图工具，虚拟手绘风格的白板

特点：

免费和开源：Excalidraw是一个完全免费并且开源的工具，可以在没有任何费用的情况下使用。

无限的、基于画布的白板：Excalidraw提供了一个无限大小的画布供你进行绘图，让你可以尽情发挥创造力。

✍️ 手绘风格：Excalidraw的绘图风格非常接近手绘，给人一种自然、生动的感觉。

深色模式：如果你喜欢深色界面，Excalidraw支持深色模式，让你在低光环境下更加舒适地使用。

️ 定制：Excalidraw提供了一些定制选项，让你可以调整画板的外观和功能，以满足个性化需求。

图像支持：你可以轻松地将图像导入到Excalidraw中，并将其融入到你的绘图作品中。

形状库支持：Excalidraw内置了多种形状，如矩形、圆形、菱形、箭头、线条等，方便你进行绘制。

本地化（i18n）支持：Excalidraw支持多国语言本地化，可以根据你的需求选择适合的界面语言。

️ 导出为 PNG、SVG 和剪贴板：完成绘图后，你可以将作品导出为PNG或SVG格式的文件，或直接复制到剪贴板中使用。

开放格式 - 将图纸导出为 JSON 文件：Excalidraw使用JSON文件格式保存图纸数据，这样你可以方便地在不同设备上进行编辑和共享。

⚒️ 多种工具：Excalidraw提供了丰富的绘图工具，包括矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦等，让你可以根据需要选择合适的工具进行绘制。

➡️ 箭头绑定和标记箭头：Excalidraw支持箭头绑定和标记箭头，使得你可以更清晰地表达绘图中的关联和指向。

撤消/重做：Excalidraw提供了撤消和重做功能，方便你进行修改和调整。

缩放和平移支持：Excalidraw支持缩放和平移操作，让你可以轻松地查看和编辑大尺寸的绘图作品。

二、实现功能

PWA 支持

首先，让我们来看看 PWA 支持的含义。PWA 是一种基于 Web 技术开发的应用程序模型，它可以让 Web 应用程序更像本地应用程序。PWA 通过使用 Service Worker 技术来实现脱机工作和后台同步，从而提供了更好的离线体验。此外，PWA 还支持添加到主屏幕、推送通知等功能，使得用户可以在没有安装应用程序的情况下使用 Web 应用程序。

对于实时协作应用程序而言，PWA 支持尤为重要。实时协作应用程序需要保证数据实时同步，并且在网络连接不稳定或断开的情况下仍然能够正常工作。PWA 技术可以帮助实现这些功能，并且提供更好的用户体验。

实时协作

实时协作是指多个用户在同一时间对同一个文档、文件或项目进行编辑和修改的能力。实时协作应用程序需要确保数据的实时同步，以便用户可以看到其他用户的更改并进行响应。这对于团队协作和远程工作而言尤为重要。

为了实现实时协作，我们需要使用 WebSocket 技术来建立实时通信通道，并使用特定的算法来解决并发修改问题。例如，CRDT 算法可以实现分布式数据同步，从而让多个用户同时编辑同一个文档成为可能。

端到端加密

对于实时协作应用程序而言，安全性是至关重要的。由于多个用户可以同时对同一个文档或项目进行编辑，因此需要确保数据的安全性和机密性。为了实现这一目标，我们可以使用端到端加密技术。

端到端加密是指在数据从发送方到接收方之间进行加密，以保护数据不被第三方窃取或篡改。在实时协作应用程序中，端到端加密可以确保数据的安全性和机密性，从而保护用户的隐私和商业机密。

本地优先支持

在实时协作应用程序中，本地优先支持是指将用户数据保存在本地浏览器中，并确保数据实时同步到云端。本地优先支持可以提高应用程序的性能和响应速度，并且确保用户数据在网络连接不稳定或断开的情况下仍然可用。

为了实现本地优先支持，我们可以使用 IndexedDB 或 Web Storage 技术将用户数据保存在浏览器本地。这些技术允许我们在用户离线时缓存数据，并在用户重新联网时将数据同步到云端。这可以大大提高应用程序的性能和响应速度，并提供更好的用户体验。

共享链接

共享链接是指将文档、文件或项目导出为只读链接，以便用户可以与他人共享。对于实时协作应用程序而言，共享链接可以使得用户更加方便地与他人进行合作，并提高应用程序的使用率和传播效果。

为了实现共享链接，我们可以将文档、文件或项目导出为特定的链接格式，并将链接分享给其他用户。在实现共享链接时，我们需要确保链接具有足够的安全性和机密性，以避免用户数据被第三方窃取或篡改。

三、技术选型

html+css+js

react

svg

五、源码地址

私信回复：77