socket.io 和canvas 實現(xiàn)的共享畫板功能

起初只是想要寫個簡單的畫板,后面不知不覺的想起石墨文檔有一個白板功能,就想將當前這個畫布功能,開發(fā)成一個簡易版的協(xié)作畫板。
在線演示:努力部署中,目前需要clone到本地運行。
2、運行
git clone <repository> npm install #>>>對于開發(fā)階段: #前端服務(wù)啟動(利用webpack dev server): npm run dev #后臺服務(wù)啟動(使用了nodemon 實時監(jiān)聽后端文件修改重啟服務(wù)) npm run start #>>>對于生產(chǎn)階段: #打包前端文件,然后啟動服務(wù)器即可 1、 npm run build 2、 npm run start
3、功能:
開發(fā)完成:
•畫布縮放(Done)
•畫布顏色(Done)
•畫筆顏色(Done)
•畫筆粗細(Done)
•歷史記錄(撤銷,恢復)(Done)
•聊天室(Done)
•繪制協(xié)作(類似于石墨文檔協(xié)作)(Done)
待開發(fā)的功能:
•UI 界面美化(待開發(fā)) •打算使用UI庫(material Design)
•文字控件(待開發(fā))
•上傳圖片,基于圖片繪圖(待開發(fā))
•繪圖帶基本形狀可拖拽調(diào)控大小 (待開發(fā))
• 聊天功能豐富(表情,圖片,音視頻)(待開發(fā)) •webRTC 獲取視頻流數(shù)據(jù),并傳輸
•其它未知功能(x)
4、效果圖
5、后話
這個應用實現(xiàn)的比較基礎(chǔ),還有很大的改進空間。
以上所述是小編給大家介紹的socket.io 和canvas 實現(xiàn)的共享畫板功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關(guān)文章
JavaScript+Canvas實現(xiàn)自定義畫板的示例代碼
這篇文章主要介紹了JavaScript+Canvas實現(xiàn)自定義畫板的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小2019-05-13- 幾何畫板怎么利用弧繪制三角形折疊?幾何畫板中想要繪制一個在四邊形邊上折疊起來的三角形,該怎么制作這個效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-05-09
- 幾何畫板怎么制作旋轉(zhuǎn)的正六邊形課件?幾何畫板中想要制作一個課件,讓正六邊形旋轉(zhuǎn)起來,該怎么實現(xiàn)呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-05-07
- 幾何畫板怎么一只飛舞的蝴蝶動畫?幾何畫板中想要制作一只蝴蝶飛舞的動畫效果,該怎么制作這個動畫效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下2019-04-23
- 這篇文章主要介紹了手把手教你實現(xiàn)一個canvas智繪畫板的方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面2019-03-04
ai怎么設(shè)置畫板屬性? ai畫板設(shè)置屬性的教程
ai怎么設(shè)置畫板屬性?ai中想要對畫板進行設(shè)置,該怎么設(shè)置畫板屬性呢?下面我們就來看看ai畫板設(shè)置屬性的教程,需要的朋友可以參考下2019-02-27- 金排物理畫板2019是一款基于微軟Word、方便物理教師制做試題教案課件等的軟件,使用本軟件您可以將圖形圖片等添加到WORD工具欄、菜單欄、金排素材庫等,打造自己的模板輕而2019-02-25