我的白板

日期:2018-01-29       浏览:688

一 背景

出于某种个人原因,本人一直很想做一个可以多方协作使用的白板,类似桌面共享一样,但是可以多方都可以在上面标注的白板。
  • 可访问地址:http://qbian.me:8082/
  • github地址:https://github.com/Qbian61/whiteBoard
没有做浏览器兼容,仅测试了 chrome 浏览器

二 功能列表

  • 画布等比缩放
  • 改变线条颜色
  • 改变线条宽度
  • 画笔工具
  • 画直线
  • 画矩形
  • 画圆
  • 填写文本
  • 橡皮擦
  • 撤销上一步
  • 清空画板
  • 上传画板背景图片,图片仓库管理。
  • 访问地址后跟上查询参数 ?id=roomId 可进入自定义房间免受其他用户干扰

三 效果图

示例图-1
示例图-1
示例图-2(有背景图片)
示例图-2(有背景图片)
示例图-3(有背景图片)
示例图-3(有背景图片)

四 代码讲解

4.1 服务端

-server.js                  启动 node 服务器的入口文件
-src/ws.js                  websocket路由配置相关文件

4.2 前端

-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 即可。
扫码关注有惊喜

(转载本站文章请注明作者和出处 qbian)

暂无评论

Copyright 2016 qbian. All Rights Reserved.

文章目录