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

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

内容简介:这个应用实现的比较基础,还有很大的改进空间,感兴趣的你可以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 实现的共享画板

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

查看所有标签

猜你喜欢:

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

活着就为改变世界

活着就为改变世界

[美] 杰弗里·扬、威廉·西蒙 / 蒋永军 / 中信出版社 / 2010-6 / 39.00元

内容简介 苹果公司CEO史蒂夫•乔布斯这个一直活在自己想象的世界里的创业奇才,经历过各种挫折与失落,但他那无所畏惧、敢于承担的个性让他一直努力实践着自己的价值观,总能为他的离奇想法找到解决问题的办法。 本书两位作者通过深入访谈和资料调查,揭秘了许多乔布斯个人的创业经历和家庭变故,为大家塑造了一个活生生的“乔布斯式”的鲜活人物,描述了一个个充满传奇色彩的商业奇迹,真实地再现了乔布斯几十年......一起来看看 《活着就为改变世界》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具