Skip to content

Commit 2cec12e

Browse files
author
likai
committedNov 28, 2021
fix: 截图区域工具栏首次点击时删除裁剪框的8个可操作点
·
v1.9.9v1.9.0
1 parent 44e1abf commit 2cec12e

File tree

6 files changed

+93
-39
lines changed

6 files changed

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

‎src/lib/main-entrance/InitData.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ let colorSelectController: HTMLElement | null = null;
4343
let rightPanel: HTMLElement | null = null;
4444
let colorSelectPanel: HTMLElement | null = null;
4545
let undoController: HTMLElement | null = null;
46+
// 屏幕截图容器
47+
let screenShortImageController: HTMLCanvasElement | null = null;
4648

4749
// 数据初始化标识
4850
let initStatus = false;
@@ -134,6 +136,16 @@ export default class InitData {
134136
return textClickStatus;
135137
}
136138

139+
// 获取屏幕截图容器
140+
public getScreenShortImageController() {
141+
return screenShortImageController;
142+
}
143+
144+
// 设置屏幕截图
145+
public setScreenShortImageController(imageController: HTMLCanvasElement) {
146+
screenShortImageController = imageController;
147+
}
148+
137149
// 设置截图工具栏展示状态
138150
public setToolStatus(status: boolean) {
139151
toolController = this.getToolController() as HTMLDivElement;

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

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ export function drawCutOutBox(
2121
context: CanvasRenderingContext2D,
2222
borderSize: number,
2323
controller: HTMLCanvasElement,
24-
imageController: HTMLCanvasElement
24+
imageController: HTMLCanvasElement,
25+
drawBorders = true
2526
) {
2627
// 获取画布宽高
2728
const canvasWidth = controller?.width;
@@ -45,42 +46,45 @@ export function drawCutOutBox(
4546
// 绘制8个边框像素点并保存坐标信息以及事件参数
4647
context.globalCompositeOperation = "source-over";
4748
context.fillStyle = "#2CABFF";
48-
// 像素点大小
49-
const size = borderSize;
50-
// 绘制像素点
51-
context.fillRect(mouseX - size / 2, mouseY - size / 2, size, size);
52-
context.fillRect(
53-
mouseX - size / 2 + width / 2,
54-
mouseY - size / 2,
55-
size,
56-
size
57-
);
58-
context.fillRect(mouseX - size / 2 + width, mouseY - size / 2, size, size);
59-
context.fillRect(
60-
mouseX - size / 2,
61-
mouseY - size / 2 + height / 2,
62-
size,
63-
size
64-
);
65-
context.fillRect(
66-
mouseX - size / 2 + width,
67-
mouseY - size / 2 + height / 2,
68-
size,
69-
size
70-
);
71-
context.fillRect(mouseX - size / 2, mouseY - size / 2 + height, size, size);
72-
context.fillRect(
73-
mouseX - size / 2 + width / 2,
74-
mouseY - size / 2 + height,
75-
size,
76-
size
77-
);
78-
context.fillRect(
79-
mouseX - size / 2 + width,
80-
mouseY - size / 2 + height,
81-
size,
82-
size
83-
);
49+
// 是否绘制裁剪框的8个像素点
50+
if (drawBorders) {
51+
// 像素点大小
52+
const size = borderSize;
53+
// 绘制像素点
54+
context.fillRect(mouseX - size / 2, mouseY - size / 2, size, size);
55+
context.fillRect(
56+
mouseX - size / 2 + width / 2,
57+
mouseY - size / 2,
58+
size,
59+
size
60+
);
61+
context.fillRect(mouseX - size / 2 + width, mouseY - size / 2, size, size);
62+
context.fillRect(
63+
mouseX - size / 2,
64+
mouseY - size / 2 + height / 2,
65+
size,
66+
size
67+
);
68+
context.fillRect(
69+
mouseX - size / 2 + width,
70+
mouseY - size / 2 + height / 2,
71+
size,
72+
size
73+
);
74+
context.fillRect(mouseX - size / 2, mouseY - size / 2 + height, size, size);
75+
context.fillRect(
76+
mouseX - size / 2 + width / 2,
77+
mouseY - size / 2 + height,
78+
size,
79+
size
80+
);
81+
context.fillRect(
82+
mouseX - size / 2 + width,
83+
mouseY - size / 2 + height,
84+
size,
85+
size
86+
);
87+
}
8488
// 绘制结束
8589
context.restore();
8690
// 使用drawImage将图片绘制到蒙层下方

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { calculateOptionIcoPosition } from "@/lib/split-methods/CalculateOptionI
99
import InitData from "@/lib/main-entrance/InitData";
1010
import { getCanvasImgData } from "@/lib/common-methords/GetCanvasImgData";
1111
import { takeOutHistory } from "@/lib/common-methords/TakeOutHistory";
12+
import { drawCutOutBox } from "@/lib/split-methods/DrawCutOutBox";
1213

1314
export function toolClickEvent(
1415
toolName: string,
@@ -19,6 +20,31 @@ export function toolClickEvent(
1920
) {
2021
const data = new InitData();
2122
const textInputController = data.getTextInputController();
23+
const screenShortController = data.getScreenShortController();
24+
const ScreenShortImageController = data.getScreenShortImageController();
25+
if (screenShortController == null || ScreenShortImageController == null)
26+
return;
27+
// 获取canvas容器
28+
const screenShortCanvas = screenShortController.getContext(
29+
"2d"
30+
) as CanvasRenderingContext2D;
31+
// 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框
32+
if (!data.getToolClickStatus()) {
33+
// 获取裁剪框位置信息
34+
const cutBoxPosition = data.getCutOutBoxPosition();
35+
// 开始绘制无像素点裁剪框
36+
drawCutOutBox(
37+
cutBoxPosition.startX,
38+
cutBoxPosition.startY,
39+
cutBoxPosition.width,
40+
cutBoxPosition.height,
41+
screenShortCanvas,
42+
data.getBorderSize(),
43+
screenShortController as HTMLCanvasElement,
44+
ScreenShortImageController,
45+
false
46+
);
47+
}
2248
// 更新当前点击的工具栏条目
2349
data.setToolName(toolName);
2450
// 为当前点击项添加选中时的class名

‎src/main.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,8 @@ export default class ScreenShort {
197197

198198
// 存放html2canvas截取的内容
199199
this.screenShortImageController = canvas;
200+
// 存储屏幕截图
201+
this.data.setScreenShortImageController(canvas);
200202

201203
// 赋值截图区域canvas画布
202204
this.screenShortCanvas = context;
@@ -296,6 +298,10 @@ export default class ScreenShort {
296298
containerWidth,
297299
containerHeight
298300
);
301+
// 存储屏幕截图
302+
this.data.setScreenShortImageController(
303+
this.screenShortImageController
304+
);
299305
// 添加监听
300306
this.screenShortController?.addEventListener(
301307
"mousedown",
@@ -632,6 +638,7 @@ export default class ScreenShort {
632638
this.cutOutBoxBorderArr[i].width,
633639
this.cutOutBoxBorderArr[i].height
634640
);
641+
// 当前坐标点处于8个可操作点上，修改鼠标指针样式
635642
if (context.isPointInPath(currentX, currentY)) {
636643
switch (this.cutOutBoxBorderArr[i].index) {
637644
case 1:
@@ -642,15 +649,20 @@ export default class ScreenShort {
642649
}
643650
break;
644651
case 2:
652+
// 工具栏被点击则不改变指针样式
653+
if (this.data.getToolClickStatus()) break;
645654
this.screenShortController.style.cursor = "ns-resize";
646655
break;
647656
case 3:
657+
if (this.data.getToolClickStatus()) break;
648658
this.screenShortController.style.cursor = "ew-resize";
649659
break;
650660
case 4:
661+
if (this.data.getToolClickStatus()) break;
651662
this.screenShortController.style.cursor = "nwse-resize";
652663
break;
653664
case 5:
665+
if (this.data.getToolClickStatus()) break;
654666
this.screenShortController.style.cursor = "nesw-resize";
655667
break;
656668
default:

0 commit comments

Comments
 (0)
Please sign in to comment.