基于socket.io 和canvas 实现的共享画板

栏目: Html5 · 发布时间: 6年前

内容简介：这个应用实现的比较基础，还有很大的改进空间，感兴趣的你可以fork 一下，稍加完善。喜欢的你，赏赐一个小小的star吧，嘻嘻:smile:

起初只是想要写个简单的画板,后面不知不觉的想起石墨文档有一个白板功能，就想将当前这个画布功能，开发成一个简易版的协作画板。

在线演示：努力部署中，目前需要clone到本地运行。

2、运行

git clone <repository>

npm install

#>>>对于开发阶段：
#前端服务启动（利用webpack dev server）：
npm run dev

#后台服务启动(使用了nodemon 实时监听后端文件修改重启服务)
npm run start

#>>>对于生产阶段：
#打包前端文件,然后启动服务器即可
1、 npm run build
2、 npm run start
复制代码

3、功能：

开发完成:

画布缩放(Done)
画布颜色(Done)
画笔颜色(Done)
画笔粗细(Done)
历史记录（撤销，恢复）(Done)
聊天室(Done)
绘制协作(类似于石墨文档协作)（Done）

待开发的功能：

UI 界面美化（待开发）
- 打算使用UI库（material Design）
文字控件（待开发）
上传图片，基于图片绘图（待开发）
绘图带基本形状可拖拽调控大小（待开发）
聊天功能丰富（表情，图片，音视频）（待开发）
- webRTC 获取视频流数据，并传输
其它未知功能（x）

4、效果图

5、后话

这个应用实现的比较基础，还有很大的改进空间，感兴趣的你可以fork 一下，稍加完善。喜欢的你，赏赐一个小小的star吧，嘻嘻:smile:

6、扫一扫

作者	微信公众号	打赏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Laravel框架关键技术解析

陈昊、陈远征、陶业荣 / 电子工业出版社 / 2016-7 / 79.00元

《Laravel框架关键技术解析》以Laravel 5.1版本为基础，从框架技术角度介绍Laravel构建的原理，从源代码层次介绍Laravel功能的应用。通过本书的学习，读者能够了解Laravel框架实现的方方面面，完成基于该框架的定制化应用程序开发。《Laravel框架关键技术解析》第1章到第4章主要介绍了与Laravel框架学习相关的基础部分，读者可以深入了解该框架的设计思想，学习环......一起来看看《Laravel框架关键技术解析》这本书的介绍吧!

码农工具