基於socket.io 和canvas 實現的共享畫板

DrawBoard-Online

draw together with yout coworker, enjoy the creating time

一、基於socket io 和 canvas 實現的共享畫板

起初只是想要寫個簡單的畫板,後面不知不覺的想起石墨文檔有一個白板功能，就想將當前這個畫布功能，開發成一個簡易版的協做畫板。

---

在線演示：努力部署中，目前須要clone到本地運行。

git 地址
代碼更新於2019-05-30（用mdui重構了頁面）

二、運行

git clone <repository>

npm install

#>>>對於開發階段：
#前端服務啓動（利用webpack dev server）：
npm run dev

#後臺服務啓動(使用了nodemon 實時監聽後端文件修改重啓服務)
npm run start

#>>>對於生產階段：
#打包前端文件,而後啓動服務器便可
一、 npm run build
二、 npm run start
複製代碼

三、功能：

開發完成:

• 畫布縮放(Done)
• 畫布顏色(Done)
• 畫筆顏色(Done)
• 畫筆粗細(Done)
• 歷史記錄（撤銷，恢復）(Done)
• 聊天室(Done)
• 繪製協做(相似於石墨文檔協做)（Done）
• UI 界面美化（Done）
  • 打算使用UI庫（material Design）

待開發的功能：

• 文字控件（待開發）
• 上傳圖片，基於圖片繪圖（待開發）
• 繪圖帶基本形狀可拖拽調控大小 （待開發）
• 聊天功能豐富（表情，圖片，音視頻）（待開發）
  • webRTC 獲取視頻流數據，並傳輸
• 其它未知功能（x）

四、效果圖

四、使用mdui 後的效果

六、後話

這個應用實現的比較基礎，還有很大的改進空間，感興趣的你能夠fork 一下，稍加完善。喜歡的你，賞賜一個小小的star吧，嘻嘻😄

七、掃一掃

做者	微信公衆號	打賞