bilibili-视频演示
github地址
https://github.com/excalidraw/excalidraw
在线地址
https://excalidraw.com/

用于素描手绘图的虚拟白板
-
💯 免费和开源。
-
🎨 基于画布的无限白板。
-
✍️ 手绘风格。
-
🌓 深色模式。
-
🏗️ 可定制。
-
📷 图像支持。
-
😀 形状库支持。
-
👅 本地化 (i18n) 支持。
-
🖼️ 导出为 PNG、SVG 和剪贴板。
-
💾 开放格式 – 将图纸导出为
.excalidrawjson 文件。 -
⚒️ 范围广泛的工具 – 矩形、圆形、菱形、箭头、线条、自由绘图、橡皮擦……
-
➡️ 箭头绑定和标记箭头。
-
🔙 撤销重做。
-
🔍 缩放和平移支持
docker-compose文件

先git拉取代码到本地
git clone https://github.com/excalidraw/excalidraw.git
进入项目文件夹
cd excalidraw/
修改docker-compose.yml文件
修改映射的端口号port
这里我把服务的端口映射到3001
version: "3.8"services:excalidraw:build:context: .args:NODE_ENV=developmentcontainer_name: excalidrawports::80"restart: on-failurestdin_open: truehealthcheck:disable: trueenvironment:NODE_ENV=developmentvolumes:./:/opt/node_app/app:delegated./package.json:/opt/node_app/package.json./yarn.lock:/opt/node_app/yarn.locknotused:/opt/node_app/app/node_modulesvolumes:notused:
编译并启动
docker-compose up --build -d

开放端口
sudo ufw allow 3001

访问ip:端口
http://192.168.1.33:3001/

点击右上角的素材库
点击添加素材库

选择需要的素材库
点击➡️ Add to Excalidraw

可以看到素材库已经被加载

鼠标拖拽即可添加素材到画布

默认不支中文手写,但是支持英文手写

本文使用chrome插件解决中文手绘字体
写一个chrome扩展使用declarativeNetRequest代理api
中文手写字体效果

本地化部署,避免因为网络原因无法访问
部署后可以使用本地ip浏览器访问,并保留自己的素材库
点击底部的阅读原文
可以查看本文对应的视频演示
END
