❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！
🥦 微信公众号｜搜一搜：蚝油菜花 🥦
🚀 快速阅读
- Excalidraw 是一款开源的在线白板工具，具备手绘风格和实时协作功能。
- 支持多种绘图工具、便捷导出、离线可用及跨平台兼容性。
- 适用于远程协作、头脑风暴、产品设计和技术绘图等多个场景。
正文（附运行示例）
Excalidraw 是什么
Excalidraw 是一款开源的在线白板工具，拥有简洁的手绘风格和实时协作功能。Excalidraw 完全在浏览器中运行，无需安装，支持多人同时编辑同一张图，提供端到端加密。Excalidraw 的核心功能包括各种绘图工具、导出为 PNG 或 SVG 格式、离线可用及跨平台兼容性。Excalidraw 适于快速草图、头脑风暴和远程协作，特别适合产品经理、开发者和教育工作者。
Excalidraw 的主要功能
- 手绘风格：Excalidraw 提供的图形都是手绘风格，让作品看起来更自然、有创意感。
- 实时协作：支持多人在线实时协作，能同时在一个画布上创作，且支持端到端加密。
- 丰富绘图工具：提供矩形、圆形、箭头、线条、自由绘制等多种绘图工具。
- 便捷导出：支持将作品导出为 PNG、SVG 格式，或复制到剪贴板。
- 离线可用：用 PWA（Progressive Web App）技术，在没有网络的情况下能继续使用。
- 跨平台：在电脑和手机上访问，支持随时随地画图。
- 无限画布：提供无限大的画布，用户自由绘制和排列图形。
Excalidraw 的技术原理
- 前端框架：Excalidraw 用 React 框架构建前端界面，基于框架组件化和状态管理的优势。
- 绘图引擎：Excalidraw 用自定义的绘图引擎处理图形的绘制、编辑和渲染。
- 实时协作：基于 WebSocket 的实时通信技术，实现多人协作时的数据同步。
- 国际化：支持多语言，基于 i18n 等国际化库实现界面的多语言切换。
如何运行 Excalidraw
安装
注意：以下指令适用于在自己的应用中集成 Excalidraw npm 包。如需本地开发，请参阅我们的开发指南。
npm install react react-dom @excalidraw/excalidraw
或使用 yarn：
yarn add react react-dom @excalidraw/excalidraw
示例代码
以下是一个简单的示例，展示了如何在 React 应用中集成 Excalidraw：
import React from "react";
import ReactDOM from "react-dom";
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<div style={{ height: "100vh" }}>
<Excalidraw />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
代码解释
- 导入依赖：首先导入 React 和
@excalidraw/excalidraw包。 - 创建组件：创建一个
App组件，返回一个包含 Excalidraw 组件的div。 - 设置高度：设置
div的高度为 100vh，确保 Excalidraw 组件能够占据整个视口。 - 渲染组件：使用
ReactDOM.render方法将App组件渲染到页面上的root元素中。
资源
- 项目官网：https://excalidraw.com
- GitHub 仓库：https://github.com/excalidraw/excalidraw
- 文档：https://docs.excalidraw.com
- Excalidraw+：https://plus.excalidraw.com
- VSCode 扩展：https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor
❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！
🥦 微信公众号｜搜一搜：蚝油菜花 🥦
