Skip to content

Commit d4a19f5

Browse files
author
likai
committedNov 27, 2021
fix: 修复框选完成后,鼠标点击其他位置截图工具栏跟着移动问题
1 parent d43eafd commit d4a19f5

File tree

3 files changed

+28
-2
lines changed

3 files changed

+28
-2
lines changed
 

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# js-web-screen-shot · [![npm](https://img.shields.io/badge/npm-v1.3.1-2081C1)](https://www.npmjs.com/package/js-web-screen-shot) [![yarn](https://img.shields.io/badge/yarn-v1.3.1-F37E42)](https://yarnpkg.com/package/js-web-screen-shot) [![github](https://img.shields.io/badge/GitHub-depositary-9A9A9A)](https://github.com/likaia/js-screen-shot) [![](https://img.shields.io/github/issues/likaia/js-screen-shot)](https://github.com/likaia/js-screen-shot/issues) [![]( https://img.shields.io/github/forks/likaia/js-screen-shot)](``https://github.com/likaia/js-screen-shot/network/members) [![]( https://img.shields.io/github/stars/likaia/js-screen-shot)](https://github.com/likaia/js-screen-shot/stargazers)
1+
# js-web-screen-shot · [![npm](https://img.shields.io/badge/npm-v1.3.2-2081C1)](https://www.npmjs.com/package/js-web-screen-shot) [![yarn](https://img.shields.io/badge/yarn-v1.3.2-F37E42)](https://yarnpkg.com/package/js-web-screen-shot) [![github](https://img.shields.io/badge/GitHub-depositary-9A9A9A)](https://github.com/likaia/js-screen-shot) [![](https://img.shields.io/github/issues/likaia/js-screen-shot)](https://github.com/likaia/js-screen-shot/issues) [![]( https://img.shields.io/github/forks/likaia/js-screen-shot)](``https://github.com/likaia/js-screen-shot/network/members) [![]( https://img.shields.io/github/stars/likaia/js-screen-shot)](https://github.com/likaia/js-screen-shot/stargazers)
22
web端自定义截屏插件(原生JS版),运行视频:[实现web端自定义截屏功能](https://www.bilibili.com/video/BV1Ey4y127cV) ,效果图如下:![截屏效果图](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/486d810877a24582aa8cf110e643c138~tplv-k3u1fbpfcp-watermark.image)
33

44
## 写在前面

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-web-screen-shot",
3-
"version": "1.3.1",
3+
"version": "1.3.2",
44
"description": "web端自定义截屏插件(原生JS版)",
55
"main": "dist/screenShotPlugin.common.js",
66
"private": false,

‎src/main.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,11 @@ export default class ScreenShort {
7070

7171
// 鼠标点击状态
7272
private clickFlag = false;
73+
// 鼠标拖动状态
74+
private dragFlag = false;
75+
// 上一个裁剪框坐标信息
76+
private drawGraphPrevX = 0;
77+
private drawGraphPrevY = 0;
7378
private fontSize = 17;
7479
// 最大可撤销次数
7580
private maxUndoNum = 15;
@@ -422,6 +427,9 @@ export default class ScreenShort {
422427
this.movePosition.moveStartX = mouseX;
423428
this.movePosition.moveStartY = mouseY;
424429
} else {
430+
// 保存当前裁剪框的坐标
431+
this.drawGraphPrevX = this.drawGraphPosition.startX;
432+
this.drawGraphPrevY = this.drawGraphPosition.startY;
425433
// 绘制裁剪框,记录当前鼠标开始坐标
426434
this.drawGraphPosition.startX = mouseX;
427435
this.drawGraphPosition.startY = mouseY;
@@ -436,6 +444,11 @@ export default class ScreenShort {
436444
this.data.getToolName() == "undo"
437445
)
438446
return;
447+
448+
// 工具栏未选择且鼠标处于按下状态时, 修改拖动状态为true
449+
if (!this.data.getToolClickStatus() && this.data.getDragging()) {
450+
this.dragFlag = true;
451+
}
439452
this.clickFlag = false;
440453
// 获取裁剪框位置信息
441454
const { startX, startY, width, height } = this.drawGraphPosition;
@@ -546,6 +559,17 @@ export default class ScreenShort {
546559
// 绘制结束
547560
this.data.setDragging(false);
548561
this.data.setDraggingTrim(false);
562+
563+
// 鼠标尚未拖动且工具栏未选择则不修改工具栏位置
564+
if (!this.dragFlag && !this.data.getToolClickStatus()) {
565+
// 复原裁剪框的坐标
566+
this.drawGraphPosition.startX = this.drawGraphPrevX;
567+
this.drawGraphPosition.startY = this.drawGraphPrevY;
568+
// 显示截图工具栏
569+
this.data.setToolStatus(true);
570+
return;
571+
}
572+
549573
if (this.screenShortController == null || this.screenShortCanvas == null) {
550574
return;
551575
}
@@ -571,6 +595,8 @@ export default class ScreenShort {
571595
this.screenShortController.style.cursor = "move";
572596
// 显示截图工具栏
573597
this.data.setToolStatus(true);
598+
// 复原拖动状态
599+
this.dragFlag = false;
574600
if (this.toolController != null) {
575601
// 计算截图工具栏位置
576602
const toolLocation = calculateToolLocation(

0 commit comments

Comments
 (0)
Please sign in to comment.