出于某种个人原因, 本人一直很想做一个可以多方协作使用的白板, 类似桌面共享一样, 但是可以多方都可以在上面标注的白板.
可访问地址: http://qbian.me:8082/
github 地址: https://github.com/Qbian61/whiteBoard
没有做浏览器兼容, 仅测试了 chrome 浏览器
一, 功能列表
画布等比缩放
改变线条颜色
改变线条宽度
画笔工具
画直线
画矩形
画圆
填写文本
橡皮擦
撤销上一步
清空画板
上传画板背景图片, 图片仓库管理.
访问地址后跟上查询参数 ?id=roomId 可进入自定义房间免受其他用户干扰
二, 效果图
示例图-1
示例图-2(有背景图片)
示例图-3(有背景图片)
三, 代码讲解
服务端
-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
即可.
来源: http://www.jianshu.com/p/370a588d4ea6