我的白板

琛ｈ。發布于2019-08-01 18:30 / 1120人閱讀

摘要：出于某種個人原因，本人一直很想做一個可以多方協作使用的白板，類似桌面共享一樣，但是可以多方都可以在上面標注的白板。

出于某種個人原因，本人一直很想做一個可以多方協作使用的白板，類似桌面共享一樣，但是可以多方都可以在上面標注的白板。

可訪問地址：http://qbian.me:8082/

github地址：https://github.com/Qbian61/wh...

沒有做瀏覽器兼容，僅測試了 chrome 瀏覽器

一、功能列表

畫布等比縮放

改變線條顏色

改變線條寬度

畫筆工具

畫直線

畫矩形

畫圓

填寫文本

橡皮擦

撤銷上一步

清空畫板

上傳畫板背景圖片，圖片倉庫管理。

訪問地址后跟上查詢參數 ?id=roomId 可進入自定義房間免受其他用戶干擾

二、效果圖

三、代碼講解

服務端

-server.js                  啟動 node 服務器的入口文件
-src/ws.js                  websocket路由配置相關文件

前端

-public/index.html          首頁頁面
-public/css/whiteBoard.css  首頁樣式文件
-public/image/...           首頁圖片資源
-public/js/Canvas.js        自己封裝的Canvas類
-public/js/ImageCache.js    自己封裝的本地圖片緩存類
-public/js/index.js         index.html頁面操作相關事件
-public/js/qbian.js         自己封裝的畫板上各種圖形的實體類，及其自定義相關功能方法，自定義日志，配置信息等。
-public/js/UUID.js          生成UUID的js庫

前端主要是一些自己封裝的相關信息（qbian.js），例如圓形類、矩形類、自定義日志、自定義觀察者對象、前端配置信息等。

四、啟動步驟

git clone https://github.com/Qbian61/whiteBoard.git

cd whiteBoard

npm install

node server.js

啟動成功后訪問 http://127.0.0.1:8082 即可。

GPU云服務器云服務器白板 webrtc白板電子白板 webrtc 白板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51778.html

我的白板

摘要：出于某種個人原因，本人一直很想做一個可以多方協作使用的白板，類似桌面共享一樣，但是可以多方都可以在上面標注的白板。出于某種個人原因，本人一直很想做一個可以多方協作使用的白板，類似桌面共享一樣，但是可以多方都可以在上面標注的白板。可訪問地址：http://qbian.me:8082/ github地址：https://github.com/Qbian61/wh... 沒有做瀏覽...

waruqi 2019-08-30 13:53 評論0 收藏0
我的白板

摘要：出于某種個人原因，本人一直很想做一個可以多方協作使用的白板，類似桌面共享一樣，但是可以多方都可以在上面標注的白板。出于某種個人原因，本人一直很想做一個可以多方協作使用的白板，類似桌面共享一樣，但是可以多方都可以在上面標注的白板。可訪問地址：http://qbian.me:8082/ github地址：https://github.com/Qbian61/wh... 沒有做瀏覽...

陳偉 2019-08-26 11:31 評論0 收藏0
在線教育開發實踐（一）：實時視頻與白板教學

摘要：本系列的第一篇文章，筆者分享了在瀏覽器端，結合聲網的實時音視頻互動能力與的在線白板能力，來實現一個簡單但實用的在線教室。一引入音視頻音視頻方案選擇聲網作為本次的技術方案，先從下載聲網最新的備用。作者：maverick、buhe，本文首發于 RTC 開發者社區隨著技術和基礎設施的進一步演進，線下的教育、會議已有很大比重演進為線上的教育和會議，突破了空間的桎梏。需求的多樣性爆發增長和...

Kahn 2019-08-02 16:12 評論0 收藏0
在線教育開發實踐（一）：實時視頻與白板教學

摘要：本系列的第一篇文章，筆者分享了在瀏覽器端，結合聲網的實時音視頻互動能力與的在線白板能力，來實現一個簡單但實用的在線教室。一引入音視頻音視頻方案選擇聲網作為本次的技術方案，先從下載聲網最新的備用。作者：maverick、buhe，本文首發于 RTC 開發者社區隨著技術和基礎設施的進一步演進，線下的教育、會議已有很大比重演進為線上的教育和會議，突破了空間的桎梏。需求的多樣性爆發增長和...

ygyooo 2019-08-23 16:57 評論0 收藏0