重构了自己5年前写的截图插件
时隔5年,断断续续花了亿些时间完成了js-screen-shot项目的重构,这个插件最早的目标很简单:在 Web 端实现一个类似 QQ / 微信截图的功能。用户可以框选区域,然后在画布里画矩形、圆形、箭头、画笔、马赛克、文字,最后保存截图内容。
随着功能越来越多,再加上那会儿我的技术水平还不够好,架构设计的比较差,代码也不可避免地变复杂了。尤其是后面加入了 `WebRTC` 截屏、自定义工具栏、图片模式、Electron 适配等能力后,入口文件越堆越大。
插件从发布到现在,[NPM的周下载量](https://www.npmjs.com/package/js-web-screen-shot)保持在1000+,同时有很多人反馈说画布里的内容无法二次编辑,于是就有了本次重构计划:**让画布内的元素真正变成可管理、可选中、可移动、可重绘的对象。**
本文就跟大家分享下我这次重构截图插件的整体思路、用到的技术点,以及过程中遇到的一些坑,欢迎各位感兴趣的开发者阅读本文。