Skip to content

Commit df6a4dd

Browse files
author
likai
committedNov 28, 2021
fix: 修复插件调用者可以在框选区域外绘制问题
·
v1.9.9v1.9.0
1 parent d4a19f5 commit df6a4dd

File tree

4 files changed

+42
-4
lines changed

4 files changed

+42
-4
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.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)
1+
# js-web-screen-shot · [![npm](https://img.shields.io/badge/npm-v1.3.3-2081C1)](https://www.npmjs.com/package/js-web-screen-shot) [![yarn](https://img.shields.io/badge/yarn-v1.3.3-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.2",
3+
"version": "1.3.3",
44
"description": "web端自定义截屏插件(原生JS版)",
55
"main": "dist/screenShotPlugin.common.js",
66
"private": false,

‎src/lib/split-methods/BoundaryJudgment.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { positionInfoType } from "@/lib/type/ComponentType";
2+
3+
/**
4+
* 获取工具栏工具边界绘制状态
5+
* @param startX x轴绘制起点
6+
* @param startY y轴绘制起点
7+
* @param cutBoxPosition 裁剪框位置信息
8+
*/
9+
export function getDrawBoundaryStatus(
10+
startX: number,
11+
startY: number,
12+
cutBoxPosition: positionInfoType
13+
): boolean {
14+
if (
15+
startX < cutBoxPosition.startX ||
16+
startY < cutBoxPosition.startY ||
17+
startX > cutBoxPosition.startX + cutBoxPosition.width ||
18+
startY > cutBoxPosition.startY + cutBoxPosition.height
19+
) {
20+
// 无法绘制
21+
return false;
22+
}
23+
// 可以绘制
24+
return true;
25+
}

‎src/main.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { saveBorderArrInfo } from "@/lib/common-methords/SaveBorderArrInfo";
2323
import { calculateToolLocation } from "@/lib/split-methods/CalculateToolLocation";
2424
import html2canvas from "html2canvas";
2525
import PlugInParameters from "@/lib/main-entrance/PlugInParameters";
26+
import { getDrawBoundaryStatus } from "@/lib/split-methods/BoundaryJudgment";
2627

2728
export default class ScreenShort {
2829
// 当前实例的响应式data数据
@@ -450,16 +451,28 @@ export default class ScreenShort {
450451
this.dragFlag = true;
451452
}
452453
this.clickFlag = false;
453-
// 获取裁剪框位置信息
454+
// 获取当前绘制中的工具位置信息
454455
const { startX, startY, width, height } = this.drawGraphPosition;
455456
// 获取当前鼠标坐标
456457
const currentX = nonNegativeData(event.offsetX);
457458
const currentY = nonNegativeData(event.offsetY);
458-
// 裁剪框临时宽高
459+
// 绘制中工具的临时宽高
459460
const tempWidth = currentX - startX;
460461
const tempHeight = currentY - startY;
461462
// 工具栏绘制
462463
if (this.data.getToolClickStatus() && this.data.getDragging()) {
464+
// 获取裁剪框位置信息
465+
const cutBoxPosition = this.data.getCutOutBoxPosition();
466+
// 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标
467+
// 绘制中工具的起始x、y坐标不能大于裁剪框的结束标作
468+
// 当前鼠标的x坐标不能小于裁剪框起始x坐标，不能大于裁剪框的结束坐标
469+
// 当前鼠标的y坐标不能小于裁剪框起始y坐标，不能大于裁剪框的结束坐标
470+
if (
471+
!getDrawBoundaryStatus(startX, startY, cutBoxPosition) ||
472+
!getDrawBoundaryStatus(currentX, currentY, cutBoxPosition)
473+
)
474+
return;
475+
463476
// 当前操作的不是马赛克则显示最后一次画布绘制时的状态
464477
if (this.data.getToolName() != "mosaicPen") {
465478
this.showLastHistory();

0 commit comments

Comments
 (0)
Please sign in to comment.