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

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

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

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

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

git 地址

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、效果图

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

5、后话

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

6、扫一扫

作者 微信公众号 打赏
基于socket.io 和canvas 实现的共享画板
基于socket.io 和canvas 实现的共享画板
基于socket.io 和canvas 实现的共享画板

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

查看所有标签

猜你喜欢:

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

Web Security Testing Cookbook

Web Security Testing Cookbook

Paco Hope、Ben Walther / O'Reilly Media / 2008-10-24 / USD 39.99

Among the tests you perform on web applications, security testing is perhaps the most important, yet it's often the most neglected. The recipes in the Web Security Testing Cookbook demonstrate how dev......一起来看看 《Web Security Testing Cookbook》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具