我的白板

2019年9月5日 126次阅读 来源: Qbian

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

没有做浏览器兼容，仅测试了 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 即可。

    原文作者：Qbian
    原文地址: https://segmentfault.com/a/1190000013038103
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞