支持中文手写和多画布的Handraw

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 2k 阅读时长 ≈ 2 分钟
Handraw 是支持中文手写和多画布的 Excalidraw 白板工具。

什么是 Handraw ?

Handraw 是支持中文手写和多画布的 Excalidraw 白板工具。

官网上项目名称还是 Excalidraw-CN，所以 Handraw 应该是基于 Excalidraw 二开的，特点是支持中文手写字体和多画布

官方也提供了免费使用的站点：https://handraw.top

什么是 Excalidraw ?

Excalidraw 是一款手绘风格流程图、示意图、架构图在线绘制工具，也可以作为会议画板使用，支持协同和端到端的加密。

Excalidraw 在两年前就介绍过，老苏还介绍过应用 Excalidraw 实现远程教学的 Edrys

文章传送门：开放式远程教学平台Edrys

构建镜像

如果你不想自己构建，可以跳过，直接阅读下一章节

官方提供了 Dockerfile ，但需要我们自己编。构建镜像的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 下载代码
git clone https://github.com/korbinzhao/excalidraw-cn.git
  
# 或者加个代理  
git clone https://ghproxy.com/github.com/korbinzhao/excalidraw-cn.git
  
# 进入目录  
cd excalidraw-cn
  
# 构建镜像
docker build -t wbsu2003/handraw:v1 .

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name handraw \
   -p 2213:80 \
   -e NODE_ENV=development \
   wbsu2003/handraw:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 handraw ，选择第一个 wbsu2003/handraw，版本选择 latest。

端口

本地端口不冲突就行，不确定的话可以用命令查一下

1
2
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 容器端口
2213 80

环境

可变 值
NODE_ENV 设为 development

更多的环境变量，请参考 .env.production 文件或者 .env.development，地址分别是：

  • https://github.com/korbinzhao/excalidraw-cn/blob/master/.env.production

  • https://github.com/korbinzhao/excalidraw-cn/blob/master/.env.development

不过老苏怀疑这些参数，应该是需要本地编译才起作用的

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷

1
2
3
4
5
6
7
# 运行容器
docker run -d \
   --restart unless-stopped \
   --name handraw \
   -p 2213:80 \
   -e NODE_ENV=development \
   wbsu2003/handraw

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
version: "3.8"

services:
  handraw:
    image: wbsu2003/handraw
    container_name: handraw
    ports:
      - "2213:80"
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    environment:
      - NODE_ENV=development

然后执行下面的命令

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 handraw
mkdir -p /volume1/docker/handraw

# 进入 handraw 目录
cd /volume1/docker/handraw

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:2213 就能看到注册界面

中文手写

文字 –> 字体 –> 手写

MacOS 系统和 Windows 系统下中文手写字体不同，下面是 Windows 上的效果

多画布

其他功能可以参考 Excalidraw

文章传送门：支持手绘风格的白板Excalidraw

参考文档

korbinzhao/excalidraw-cn: Excalidraw-CN 是支持中文手写和多画布的 Excalidraw 白板工具。Excalidraw-CN is a whiteboard supporting Chinese hand draw font and multi-canvas based on Excalidraw.
地址：https://github.com/korbinzhao/excalidraw-cn

Handraw | 中文友好的手写效果白板工具
地址：https://handraw.top/