我的白板

陈伟发布于2019-08-26 11:31 / 1771人阅读

摘要：出于某种个人原因，本人一直很想做一个可以多方协作使用的白板，类似桌面共享一样，但是可以多方都可以在上面标注的白板。

出于某种个人原因，本人一直很想做一个可以多方协作使用的白板，类似桌面共享一样，但是可以多方都可以在上面标注的白板。

可访问地址：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 即可。

服务器托管混合云白板 webrtc白板电子白板 webrtc 白板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107032.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... 没有做浏览...

goji 2019-08-05 12:53 评论0 收藏0
我的白板

摘要：出于某种个人原因，本人一直很想做一个可以多方协作使用的白板，类似桌面共享一样，但是可以多方都可以在上面标注的白板。出于某种个人原因，本人一直很想做一个可以多方协作使用的白板，类似桌面共享一样，但是可以多方都可以在上面标注的白板。可访问地址：http://qbian.me:8082/ github地址：https://github.com/Qbian61/wh... 没有做浏览...

琛ｈ。 2019-08-01 18:30 评论0 收藏0
在线教育开发实践（一）：实时视频与白板教学

摘要：本系列的第一篇文章，笔者分享了在浏览器端，结合声网的实时音视频互动能力与的在线白板能力，来实现一个简单但实用的在线教室。一引入音视频音视频方案选择声网作为本次的技术方案，先从下载声网最新的备用。作者：maverick、buhe，本文首发于 RTC 开发者社区随着技术和基础设施的进一步演进，线下的教育、会议已有很大比重演进为线上的教育和会议，突破了空间的桎梏。需求的多样性爆发增长和...

Kahn 2019-08-02 16:12 评论0 收藏0
在线教育开发实践（一）：实时视频与白板教学

摘要：本系列的第一篇文章，笔者分享了在浏览器端，结合声网的实时音视频互动能力与的在线白板能力，来实现一个简单但实用的在线教室。一引入音视频音视频方案选择声网作为本次的技术方案，先从下载声网最新的备用。作者：maverick、buhe，本文首发于 RTC 开发者社区随着技术和基础设施的进一步演进，线下的教育、会议已有很大比重演进为线上的教育和会议，突破了空间的桎梏。需求的多样性爆发增长和...

ygyooo 2019-08-23 16:57 评论0 收藏0