docker-compose自部署:excalidraw在线手绘白板

bilibili-视频演示

点击本文字,打开哔哩哔哩APP

NO.1
excalidraw

github地址

https://github.com/excalidraw/excalidraw

在线地址

https://excalidraw.com/

img

用于素描手绘图的虚拟白板

  • 💯 免费和开源。

  • 🎨 基于画布的无限白板。

  • ✍️ 手绘风格。

  • 🌓 深色模式。

  • 🏗️ 可定制。

  • 📷 图像支持。

  • 😀 形状库支持。

  • 👅 本地化 (i18n) 支持。

  • 🖼️ 导出为 PNG、SVG 和剪贴板。

  • 💾 开放格式 – 将图纸导出为.excalidrawjson 文件。

  • ⚒️ 范围广泛的工具 – 矩形、圆形、菱形、箭头、线条、自由绘图、橡皮擦……

  • ➡️ 箭头绑定和标记箭头。

  • 🔙 撤销重做。

  • 🔍 缩放和平移支持

NO.2
服务部署

docker-compose文件

img

先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:      - "3001: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_modulesvolumes:  notused:

编译并启动

docker-compose up --build -d

img

开放端口

sudo ufw allow 3001

img

NO.3
使用excalidraw

访问ip:端口

http://192.168.1.33:3001/

img

点击右上角的素材库

点击添加素材库

img

选择需要的素材库

点击➡️ Add to Excalidraw

img

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

img

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

img

NO.4
中文手写字体

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

img

本文使用chrome插件解决中文手绘字体

写一个chrome扩展使用declarativeNetRequest代理api

中文手写字体效果

img

NO.5
Tips

本地化部署,避免因为网络原因无法访问

部署后可以使用本地ip浏览器访问,并保留自己的素材库

点击底部的阅读原文

可以查看本文对应的视频演示

END