bilibili-视频演示
github地址
https://github.com/excalidraw/excalidraw
在线地址
https://excalidraw.com/
用于素描手绘图的虚拟白板
-
💯 免费和开源。
-
🎨 基于画布的无限白板。
-
✍️ 手绘风格。
-
🌓 深色模式。
-
🏗️ 可定制。
-
📷 图像支持。
-
😀 形状库支持。
-
👅 本地化 (i18n) 支持。
-
🖼️ 导出为 PNG、SVG 和剪贴板。
-
💾 开放格式 – 将图纸导出为
.excalidraw
json 文件。 -
⚒️ 范围广泛的工具 – 矩形、圆形、菱形、箭头、线条、自由绘图、橡皮擦……
-
➡️ 箭头绑定和标记箭头。
-
🔙 撤销重做。
-
🔍 缩放和平移支持
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=development
container_name: excalidraw
ports:
80" :
restart: on-failure
stdin_open: true
healthcheck:
disable: true
environment:
NODE_ENV=development
volumes:
./:/opt/node_app/app:delegated
./package.json:/opt/node_app/package.json
./yarn.lock:/opt/node_app/yarn.lock
notused:/opt/node_app/app/node_modules
volumes:
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
![](http://www.dsx2020.com/files/logo.jpg)