前言
上周六有个群友@我说Gitee的反馈模块新增了截图功能，我就去体验了下，发现他们用的就是我的插件😁，本文就跟大家分享下这个插件，欢迎各位感兴趣的开发者阅读本文。
插件地址与实现原理
本插件采用原生js实现，可以集成在任意一个web项目中，插件npm地址与GitHub地址请移步：
- js-screen-shot（npm）[1]
- js-screen-shot（GitHub）[2]
插件的实现原理请移步：
- 实现Web端自定义截屏[3]
- 实现Web端自定义截屏(JS版)[4]
在线体验本插件，可移步我的开源项目chat-system[5]进行体验，插件的运行效果视频请移步实现web端自定义截屏功能-效果视频[6]。
Gitee产品经理的青睐
月初的时候，Gitee的产品经理在掘金看到我的截图插件js-screen-shot[7]觉得还不错，他们最近在做这方面的功能，就打算将我的插件直接集成进去，跟我沟通了下版权相关的事情。
image-20211129225953184
沟通完成后，他问我要不要把插件在Gitee也放一份，可以帮我推荐下，我毫不犹豫的抱住了大腿，就把插件搬过去了，得到一波首页推荐😂
image-20211129230823603
img
Gitee[8]的反馈模块需要登录后，点页面右侧的发送反馈图标。
影响体验的一些小问题
上周二，从GitHub来了个网友，加了我微信，给我的插件提了两个issues，因为周内没时间处理这些问题，就计划周末统一处理下插件的issues。
image-20211129231616134
整理有效的issues
时间回到上周六早上，我打开GitHub瞅了一眼issues，许久不看居然已经有19条了。
image-20211129232250926
经过一番整理，去掉一些无用的和已经修改好了的，最终确定了4条：
- 调用者可以在框选区域外绘制问题
- 截图区域工具栏首次点击时删除裁剪框的8个可操作点
- 修复框选完成后，鼠标点击其他位置截图工具栏跟着移动问题
- 添加可选参数支持单击截全屏功能
解决issues
问题整理完成，接下来就是解决问题环节了。
选区外绘制问题
正常情况下，截图区域确立后，用户都会在裁剪框区域内进行绘制，所以我就没考虑这个边界情况🤥，插件用的人多了后，自然就有人发现了这个问题，我们拿gitee的反馈模块举例（gitee目前用的还是我的旧版插件，肯定存在这个问题），如下所示，我们绘制的4个红色方框都超出裁剪框了：
image-20211129234154073
实现思路
这个问题解决起来比较简单，裁剪框已经绘制好了，知道它的坐标信息，我们在进行绘制时，只需要判断当前鼠标位置是否超出裁剪框的坐标点区域即可。部分实现代码如下所示：
// 获取裁剪框位置信息 const cutBoxPosition = this.data.getCutOutBoxPosition(); // 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标 // 绘制中工具的起始x、y坐标不能大于裁剪框的结束坐标 // 当前鼠标的x坐标不能小于裁剪框起始x坐标，不能大于裁剪框的结束坐标 // 当前鼠标的y坐标不能小于裁剪框起始y坐标，不能大于裁剪框的结束坐标 if ( !getDrawBoundaryStatus(startX, startY, cutBoxPosition) || !getDrawBoundaryStatus(currentX, currentY, cutBoxPosition) ) return;
getDrawBoundaryStatus函数实现如下所示：
/** * 获取工具栏工具边界绘制状态 * @param startX x轴绘制起点 * @param startY y轴绘制起点 * @param cutBoxPosition 裁剪框位置信息 */ export function getDrawBoundaryStatus( startX: number, startY: number, cutBoxPosition: positionInfoType ): boolean { if ( startX < cutBoxPosition.startX || startY < cutBoxPosition.startY || startX > cutBoxPosition.startX + cutBoxPosition.width || startY > cutBoxPosition.startY + cutBoxPosition.height ) { // 无法绘制 return false; } // 可以绘制 return true; }
具体代码请移步提交记录: fix: 修复插件调用者可以在框选区域外绘制问题[9]
