概述
搜索了國內(nèi)外資料，白板相關(guān)的開源項(xiàng)目很少，但有一個excalidraw項(xiàng)目，項(xiàng)目是去年1月開始的，但現(xiàn)在github上高達(dá)21K star，有以下特點(diǎn)：
- 開源（MIT Lisence）
- 風(fēng)格舒服，手繪風(fēng)格
- 功能強(qiáng)大，豐富的圖形庫，進(jìn)行流程圖繪制時，也會自動吸附箭頭等，用起來很方便
- 適配移動端
- 支持多人協(xié)作
- 安全，多人協(xié)作的傳輸?shù)臄?shù)據(jù)加密，并且服務(wù)端無法解密
- 官方有Bolg對核心原理進(jìn)行講解
- excalidraw+版本收費(fèi)?？赏瓿蓤F(tuán)隊(duì)、賬號、數(shù)據(jù)在線存儲等管理
效果如下：
image.png
原理
- 手繪風(fēng)格的實(shí)現(xiàn)基于另外一個開源項(xiàng)目實(shí)現(xiàn)rough，15.6Kstar，很輕量<9 kB
- 支持npm方式引入畫布功能到原有項(xiàng)目。有詳細(xì)API文檔說明。
本地運(yùn)行
步驟很簡單
git clone https://github.com/excalidraw/excalidraw.git
yarn
yarn start
- 單人繪制時，數(shù)據(jù)存儲在localStroage，可通過關(guān)閉頁簽，再清除瀏覽器緩存得到驗(yàn)證
- 多人繪制時（即左上角創(chuàng)建房間，開啟多人協(xié)作），通過瀏覽器控制臺可見，與服務(wù)端
https://firestore.googleapis.com等API有交互，如果想服務(wù)端自托管，見下文
如何實(shí)現(xiàn)excalidraw自托管
- excalidraw包括三個項(xiàng)目。excalidraw (client)、excalidraw-room(collaboration server) 、excalidraw-json (sharing server)
- 官方支持docker部署client端。鏈接
- 協(xié)作功能暫不支持自托管，但官方介紹未來將支持。#1772
- 但有網(wǎng)友提供整套部署方案（docker方式），經(jīng)實(shí)踐，可行。鏈接
