实现效果
实现后的效果如下所示：
01
工具栏跟随鼠标移动问题
这个问题可以描述为：裁剪框确定后，工具栏尚未点击，此时鼠标点其他位置，截图工具栏就跟着鼠标重新计算了位置，我们继续用Gitee来举例，如下所示：
10011
实现思路
当鼠标左键抬起时，如果工具栏尚未被点击，则会根据当前鼠标的位置结合裁剪框的大小确立截图工具栏的位置。用户只是单纯的点击了裁剪框区域的任意位置，工具栏就跟着移动了。
解决这个问题也很简单，我们只需要在鼠标移动时添加一个标识，鼠标抬起时判断这个标识是否为true即可。部分代码如下所示：
// 鼠标拖动状态 private dragFlag = false; // 鼠标移动事件 private mouseMoveEvent = (event: MouseEvent) => { // 工具栏未选择且鼠标处于按下状态时 if (!this.data.getToolClickStatus() && this.data.getDragging()) { // 修改拖动状态为true; this.dragFlag = true; } } // 鼠标抬起事件 private mouseUpEvent = () => { // 鼠标尚未拖动且工具栏未选择则不修改工具栏位置 if (!this.dragFlag && !this.data.getToolClickStatus()) { // 复原裁剪框的坐标 this.drawGraphPosition.startX = this.drawGraphPrevX; this.drawGraphPosition.startY = this.drawGraphPrevY; // 显示截图工具栏 this.data.setToolStatus(true); return; } }
具体代码请移步提交记录：fix: 修复框选完成后，鼠标点击其他位置截图工具栏跟着移动问题[10]
实现结果
修复后的效果如下所示：
工具栏跟着鼠标移动-修复后的.2021-11-30 21_08_28
删除8个可操作点
去年截图插件刚写好时，我就发现这个问题了，当截图工具栏点击后裁剪框就不允许更改了，如果8个可操作点依然存在的话，看起来很奇怪，当时想到的思路是直接删除边框的8点，但是这8个点都是绘制上去的，折腾了挺久没找到方案就搁置了，这个问题如下图所示：
删除8个可操作点
实现思路
一年后的今天，我知道删除那8个点的思路肯定行不通，我就一遍又一遍的体验QQ的截图，观察他是怎么做的，突然，我灵感惊现😼，我既然有裁剪框的坐标和大小信息，我重新绘制一下这个裁剪框不就好了🤒，裁剪框四周的8个可操作点删除后，我就可以删掉生成图片时优化那8个点的计算逻辑，导致范围不精确问题，从而实现完美截图。部分实现代码如下所示：
// 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框 if (!data.getToolClickStatus()) { // 获取裁剪框位置信息 const cutBoxPosition = data.getCutOutBoxPosition(); // 开始绘制无像素点裁剪框 drawCutOutBox( cutBoxPosition.startX, cutBoxPosition.startY, cutBoxPosition.width, cutBoxPosition.height, screenShortCanvas, data.getBorderSize(), screenShortController as HTMLCanvasElement, ScreenShortImageController, false ); }
具体代码请移步提交记录：fix: 截图区域工具栏首次点击时删除裁剪框的8个可操作点[11]
实现效果
删除8个可操作点-修复
实现单击截全屏功能
给我提issues的那个网友希望截图插件加载完毕后，用户不拖拽生成选框，直接鼠标左键单击就能截取整个屏幕，我觉得这个需求需要的人不多，就将其做成了可选参数。
实现思路
这个也很简单，鼠标抬起时，如果开启了单击截全屏，则从坐标(0，0)位置绘制一个与画布同等大小的裁剪框即可，部分代码如下所示：
// 鼠标抬起事件 private mouseUpEvent = () => { if ( cutBoxPosition.width === 0 && cutBoxPosition.height === 0 && cutBoxPosition.startX === 0 && cutBoxPosition.startY === 0 && !this.dragFlag && this.clickCutFullScreen ) { // 设置裁剪框位置为全屏 this.tempGraphPosition = drawCutOutBox( 0, 0, this.screenShortImageController.width, this.screenShortImageController.height, this.screenShortCanvas, this.data.getBorderSize(), this.screenShortController, this.screenShortImageController ) as drawCutOutBoxReturnType; } }
具体代码请移步提交记录：feat: 添加可选参数支持单击截全屏功能[12]
写在最后
至此，文章就分享完毕了。
我是神奇的程序员，一位前端开发工程师。
如果你对我感兴趣，请移步我的个人网站[13]，进一步了解。
- 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
- 文中链接可从文末参考资料中获取
