一款开源的虚拟手绘风格白板

小半 • 2024年2月29日下午7:22 • 微信精选 • 阅读 350

一款完全免费、开源的基于无限画布的白板 Web 应用，用户可以在上面创建手绘风格的作品。支持包括中文在内的多种语言，提供了自由绘制、多种工具、导出 PNG、实时协作、共享链接、自动保存等功能。

特征

免费且开源。
无限的、基于画布的白板。
类似手绘的风格。
黑暗模式。
可定制。
图片支持。
形状库支持。
本地化（i18n）支持。
导出为 PNG、SVG 和剪贴板。
开放格式：将图纸导出为.excalidrawjson 文件。
多种工具：矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦…
箭头绑定和标记箭头。
撤消/重做。
缩放和平移支持。

安装

Excalidraw 作为组件发布到 npm，可以直接嵌入到项目中。

使用 npm：

npm install react react-dom @excalidraw/excalidraw

或者 yarn：

yarn add react react-dom @excalidraw/excalidraw

自定义样式

Excalidraw 使用 CSS 变量来设计某些组件的样式。.excalidraw 要覆盖它们，用户可在和（对于暗模式变量）选择器上设置自己的.excalidraw.theme–dark 选择器。确保选择器具有更高的特异性，例如通过在其前面加上应用程序的选择器前缀：

.your-app .excalidraw {
  --color-primary: red;
}
.your-app .excalidraw.theme--dark {
  --color-primary: pink;
}

最值得注意的是，可以通过覆盖这些变量来自定义原色：

--color-primary
--color-primary-darker
--color-primary-darkest
--color-primary-light
--color-primary-contrast-offset— 稍微深一点（在亮模式下）或亮一点（在暗模式下）的--color-primary颜色来解决对比度问题

有关变量的完整列表，请检查 theme.scss:

.custom-styles .excalidraw {
  --color-primary: #fcc6d9;
  --color-primary-darker: #f783ac;
  --color-primary-darkest: #e64980;
  --color-primary-light: #f2a9c4;
}

.custom-styles .excalidraw.theme--dark {
  --color-primary: #d494aa;
  --color-primary-darker: #d64c7e;
  --color-primary-darkest: #e86e99;
  --color-primary-light: #dcbec9;
}