我的白板

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

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