基于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 实现的共享画板

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

查看所有标签

猜你喜欢:

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

推荐系统

推荐系统

[奥地利] Dietmar Jannach、Markus Zanker、Alexander Felfernig、Gerhard Friedrich / 蒋 凡 / 人民邮电出版社 / 2013-6-25 / 59.00元

编辑推荐: 通过对本书的学习,读者不仅可以全面系统地了解该领域的基础原理,还能试验如何搭建一套真正的推荐系统。 —— 百度主任架构师、百度技术委员会主席 廖若雪 本书比较全面地介绍了推荐系统涉及的相关知识点,很适合对于推荐系统感兴趣的相关人员作为入门教程,目前能够系统全面介绍相关技术的中文书籍还显得匮乏,相信这本译著对于缓解这种情况大有裨益。 ——新浪微博数据挖掘技术专家 ......一起来看看 《推荐系统》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

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

RGB CMYK 互转工具