欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2019-05-22 16:21:11   作者:佚名   我要評論
這篇文章主要介紹了socket.io 和canvas 實現(xiàn)的共享畫板功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

起初只是想要寫個簡單的畫板,后面不知不覺的想起石墨文檔有一個白板功能,就想將當前這個畫布功能,開發(fā)成一個簡易版的協(xié)作畫板。

在線演示:努力部署中,目前需要clone到本地運行。

git 地址

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)的正六邊形課件?幾何畫板中想要制作一個課件,讓正六邊形旋轉(zhuǎn)起來,該怎么實現(xiàn)呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2019-05-07
  • 幾何畫板怎么一只飛舞的蝴蝶動畫?

    幾何畫板怎么一只飛舞的蝴蝶動畫?幾何畫板中想要制作一只蝴蝶飛舞的動畫效果,該怎么制作這個動畫效果呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2019-04-23
  • 手把手教你實現(xiàn)一個canvas智繪畫板的方法

    這篇文章主要介紹了手把手教你實現(xiàn)一個canvas智繪畫板的方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面
    2019-03-04
  • ai怎么設(shè)置畫板屬性? ai畫板設(shè)置屬性的教程

    ai怎么設(shè)置畫板屬性?ai中想要對畫板進行設(shè)置,該怎么設(shè)置畫板屬性呢?下面我們就來看看ai畫板設(shè)置屬性的教程,需要的朋友可以參考下
    2019-02-27
  • 金排物理畫板 V2019 中文免費安裝版

    金排物理畫板2019是一款基于微軟Word、方便物理教師制做試題教案課件等的軟件,使用本軟件您可以將圖形圖片等添加到WORD工具欄、菜單欄、金排素材庫等,打造自己的模板輕而
    2019-02-25

最新評論