liang-z-screenshot
Version:
vue-web-screen-shot 修复 html2canvas 截图 图片空白
751 lines (750 loc) • 38.8 kB
JavaScript
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
exports.__esModule = true;
var vue_1 = require("vue");
var DrawMasking_1 = require("@/module/split-methods/DrawMasking");
var html2canvas_1 = require("html2canvas");
var PlugInParameters_1 = require("@/module/main-entrance/PlugInParameters");
var FixedData_1 = require("@/module/common-methords/FixedData");
var ZoomCutOutBoxPosition_1 = require("@/module/common-methords/ZoomCutOutBoxPosition");
var SaveBorderArrInfo_1 = require("@/module/common-methords/SaveBorderArrInfo");
var DrawCutOutBox_1 = require("@/module/split-methods/DrawCutOutBox");
var InitData_1 = require("@/module/main-entrance/InitData");
var CalculateToolLocation_1 = require("@/module/split-methods/CalculateToolLocation");
var DrawRectangle_1 = require("@/module/split-methods/DrawRectangle");
var DrawCircle_1 = require("@/module/split-methods/DrawCircle");
var DrawLineArrow_1 = require("@/module/split-methods/DrawLineArrow");
var DrawPencil_1 = require("@/module/split-methods/DrawPencil");
var DrawText_1 = require("@/module/split-methods/DrawText");
var SaveCanvasToImage_1 = require("@/module/common-methords/SaveCanvasToImage");
var SaveCanvasToBase64_1 = require("@/module/common-methords/SaveCanvasToBase64");
var DrawMosaic_1 = require("@/module/split-methods/DrawMosaic");
var CalculateOptionIcoPosition_1 = require("@/module/split-methods/CalculateOptionIcoPosition");
var SetSelectedClassName_1 = require("@/module/common-methords/SetSelectedClassName");
var webrtc_adapter_1 = require("webrtc-adapter");
var BoundaryJudgment_1 = require("@/module/split-methods/BoundaryJudgment");
var EventMonitoring = /** @class */ (function () {
function EventMonitoring(props, context) {
var _this = this;
// 图形位置参数
this.drawGraphPosition = {
startX: 0,
startY: 0,
width: 0,
height: 0
};
// 临时图形位置参数
this.tempGraphPosition = {
startX: 0,
startY: 0,
width: 0,
height: 0
};
// 裁剪框边框节点坐标事件
this.cutOutBoxBorderArr = [];
// 裁剪框顶点边框直径大小
this.borderSize = 10;
// 当前操作的边框节点
this.borderOption = null;
// 点击裁剪框时的鼠标坐标
this.movePosition = {
moveStartX: 0,
moveStartY: 0
};
// 裁剪框修剪状态
this.draggingTrim = false;
// 裁剪框拖拽状态
this.dragging = false;
// 鼠标点击状态
this.clickFlag = false;
// 鼠标拖动状态
this.dragFlag = false;
// 单击截取屏启用状态
this.clickCutFullScreen = false;
// 全屏截取状态
this.getFullScreenStatus = false;
// 上一个裁剪框坐标信息
this.drawGraphPrevX = 0;
this.drawGraphPrevY = 0;
// 当前点击的工具栏条目
this.toolName = "";
this.fontSize = 17;
// 撤销点击次数
this.undoClickNum = 0;
// 最大可撤销次数
this.maxUndoNum = 15;
// 马赛克涂抹区域大小
this.degreeOfBlur = 5;
this.history = [];
// 文本输入框位置
this.textInputPosition = {
mouseX: 0,
mouseY: 0
};
// 开始捕捉屏幕
this.startCapture = function () { return __awaiter(_this, void 0, void 0, function () {
var captureStream, err_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
captureStream = null;
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, navigator.mediaDevices.getDisplayMedia()];
case 2:
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
// 捕获屏幕
captureStream = _a.sent();
// 将MediaStream输出至video标签
this.videoController.srcObject = captureStream;
return [3 /*break*/, 4];
case 3:
err_1 = _a.sent();
// 销毁组件
this.resetComponent();
throw "浏览器不支持webrtc或者用户未授权, 浏览器名称" +
webrtc_adapter_1["default"].browserDetails.browser +
"，浏览器版本号" +
webrtc_adapter_1["default"].browserDetails.version +
err_1;
case 4: return [2 /*return*/, captureStream];
}
});
}); };
// 停止捕捉屏幕
this.stopCapture = function () {
var srcObject = _this.videoController.srcObject;
if (srcObject && "getTracks" in srcObject) {
var tracks = srcObject.getTracks();
tracks.forEach(function (track) { return track.stop(); });
_this.videoController.srcObject = null;
}
};
// 鼠标按下事件
this.mouseDownEvent = function (event) {
var _a, _b, _c;
// 当前操作的是撤销
if (_this.toolName == "undo")
return;
_this.dragging = true;
_this.clickFlag = true;
var mouseX = FixedData_1.nonNegativeData(event.offsetX);
var mouseY = FixedData_1.nonNegativeData(event.offsetY);
// 如果当前操作的是截图工具栏
if (_this.data.getToolClickStatus().value) {
// 记录当前鼠标开始坐标
_this.drawGraphPosition.startX = mouseX;
_this.drawGraphPosition.startY = mouseY;
}
// 当前操作的是画笔
if (_this.toolName == "brush" && _this.screenShortCanvas) {
// 初始化画笔
DrawPencil_1.initPencil(_this.screenShortCanvas, mouseX, mouseY);
}
// 当前操作的文本
if (_this.toolName == "text" && ((_a = _this.textInputController) === null || _a === void 0 ? void 0 : _a.value) && ((_b = _this.screenShortController) === null || _b === void 0 ? void 0 : _b.value) &&
_this.screenShortCanvas) {
// 修改鼠标样式
_this.screenShortController.value.style.cursor = "text";
// 显示文本输入区域
_this.data.setTextStatus(true);
// 判断输入框位置是否变化
if (_this.textInputPosition.mouseX != 0 &&
_this.textInputPosition.mouseY != 0 &&
_this.textInputPosition.mouseX != mouseX &&
_this.textInputPosition.mouseY != mouseY) {
DrawText_1.drawText((_c = _this.textInputController.value) === null || _c === void 0 ? void 0 : _c.innerText, _this.textInputPosition.mouseX, _this.textInputPosition.mouseY, _this.data.getSelectedColor().value, _this.fontSize, _this.screenShortCanvas);
// 清空文本输入区域的内容
_this.textInputController.value.innerHTML = "";
// 保存绘制记录
_this.addHistory();
}
// 计算文本框显示位置
var textMouseX = mouseX - 15;
var textMouseY = mouseY - 15;
// 修改文本区域位置
_this.textInputController.value.style.left = textMouseX + "px";
_this.textInputController.value.style.top = textMouseY + "px";
setTimeout(function () {
var _a;
// 获取焦点
if ((_a = _this.textInputController) === null || _a === void 0 ? void 0 : _a.value) {
_this.textInputController.value.focus();
// 记录当前输入框位置
_this.textInputPosition = { mouseX: mouseX, mouseY: mouseY };
}
});
}
// 如果操作的是裁剪框
if (_this.borderOption) {
// 设置为拖动状态
_this.draggingTrim = true;
// 记录移动时的起始点坐标
_this.movePosition.moveStartX = mouseX;
_this.movePosition.moveStartY = mouseY;
}
else {
// 保存当前裁剪框的坐标
_this.drawGraphPrevX = _this.drawGraphPosition.startX;
_this.drawGraphPrevY = _this.drawGraphPosition.startY;
// 绘制裁剪框,记录当前鼠标开始坐标
_this.drawGraphPosition.startX = mouseX;
_this.drawGraphPosition.startY = mouseY;
}
};
// 鼠标移动事件
this.mouseMoveEvent = function (event) {
if (_this.screenShortCanvas == null ||
_this.screenShortController.value == null ||
_this.toolName == "undo") {
return;
}
// 工具栏未选择且鼠标处于按下状态时
if (!_this.data.getToolClickStatus().value && _this.dragging) {
// 修改拖动状态为true;
_this.dragFlag = true;
// 隐藏截图工具栏
_this.data.setToolStatus(false);
}
_this.clickFlag = false;
// 获取当前绘制中的工具位置信息
var _a = _this.drawGraphPosition, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
// 获取当前鼠标坐标
var currentX = FixedData_1.nonNegativeData(event.offsetX);
var currentY = FixedData_1.nonNegativeData(event.offsetY);
// 绘制中工具的临时宽高
var tempWidth = currentX - startX;
var tempHeight = currentY - startY;
// 工具栏绘制
if (_this.data.getToolClickStatus().value && _this.dragging) {
// 获取裁剪框位置信息
var cutBoxPosition = _this.data.getCutOutBoxPosition();
// 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标
// 绘制中工具的起始x、y坐标不能大于裁剪框的结束标作
// 当前鼠标的x坐标不能小于裁剪框起始x坐标，不能大于裁剪框的结束坐标
// 当前鼠标的y坐标不能小于裁剪框起始y坐标，不能大于裁剪框的结束坐标
if (!BoundaryJudgment_1.getDrawBoundaryStatus(startX, startY, cutBoxPosition) ||
!BoundaryJudgment_1.getDrawBoundaryStatus(currentX, currentY, cutBoxPosition))
return;
// 当前操作的不是马赛克则显示最后一次画布绘制时的状态
if (_this.toolName != "mosaicPen") {
_this.showLastHistory();
}
switch (_this.toolName) {
case "square":
DrawRectangle_1.drawRectangle(startX, startY, tempWidth, tempHeight, _this.data.getSelectedColor().value, _this.data.getPenSize().value, _this.screenShortCanvas, _this.screenShortController.value, _this.screenShortImageController);
break;
case "round":
DrawCircle_1.drawCircle(_this.screenShortCanvas, currentX, currentY, startX, startY, _this.data.getPenSize().value, _this.data.getSelectedColor().value);
break;
case "right-top":
DrawLineArrow_1.drawLineArrow(_this.screenShortCanvas, startX, startY, currentX, currentY, 30, 10, _this.data.getPenSize().value, _this.data.getSelectedColor().value);
break;
case "brush":
// 画笔绘制
DrawPencil_1.drawPencil(_this.screenShortCanvas, currentX, currentY, _this.data.getPenSize().value, _this.data.getSelectedColor().value);
break;
case "mosaicPen":
// 绘制马赛克，为了确保鼠标位置在绘制区域中间，所以对x、y坐标进行-10处理
DrawMosaic_1.drawMosaic(currentX - 10, currentY - 10, _this.data.getPenSize().value, _this.degreeOfBlur, _this.screenShortCanvas);
break;
default:
break;
}
return;
}
// 执行裁剪框操作函数
_this.operatingCutOutBox(currentX, currentY, startX, startY, width, height, _this.screenShortCanvas);
// 如果鼠标未点击或者当前操作的是裁剪框都return
if (!_this.dragging || _this.draggingTrim)
return;
// 绘制裁剪框
_this.tempGraphPosition = DrawCutOutBox_1.drawCutOutBox(startX, startY, tempWidth, tempHeight, _this.screenShortCanvas, _this.borderSize, _this.screenShortController.value, _this.screenShortImageController);
};
// 鼠标抬起事件
this.mouseUpEvent = function () {
// 当前操作的是撤销
if (_this.toolName == "undo")
return;
// 绘制结束
_this.dragging = false;
_this.draggingTrim = false;
if (_this.screenShortController.value == null ||
_this.screenShortCanvas == null ||
_this.screenShortImageController == null) {
return;
}
// 工具栏未点击且鼠标未拖动且单击截屏状态为false则复原裁剪框位置
if (!_this.data.getToolClickStatus().value &&
!_this.dragFlag &&
!_this.clickCutFullScreen) {
// 复原裁剪框的坐标
_this.drawGraphPosition.startX = _this.drawGraphPrevX;
_this.drawGraphPosition.startY = _this.drawGraphPrevY;
return;
}
// 调用者尚未拖拽生成选区
// 鼠标尚未拖动
// 单击截取屏幕状态为true
// 则截取整个屏幕
var cutBoxPosition = _this.data.getCutOutBoxPosition();
if (cutBoxPosition.width === 0 &&
cutBoxPosition.height === 0 &&
cutBoxPosition.startX === 0 &&
cutBoxPosition.startY === 0 &&
!_this.dragFlag &&
_this.clickCutFullScreen) {
_this.getFullScreenStatus = true;
// 设置裁剪框位置为全屏
_this.tempGraphPosition = DrawCutOutBox_1.drawCutOutBox(0, 0, _this.screenShortController.value.width - _this.borderSize / 2, _this.screenShortController.value.height - _this.borderSize / 2, _this.screenShortCanvas, _this.borderSize, _this.screenShortController.value, _this.screenShortImageController);
}
if (_this.data.getToolClickStatus().value) {
// 保存绘制记录
_this.addHistory();
return;
}
// 保存绘制后的图形位置信息
_this.drawGraphPosition = _this.tempGraphPosition;
// 如果工具栏未点击则保存裁剪框位置
if (!_this.data.getToolClickStatus().value) {
var _a = _this.drawGraphPosition, startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
_this.data.setCutOutBoxPosition(startX, startY, width, height);
}
// 保存边框节点信息
_this.cutOutBoxBorderArr = SaveBorderArrInfo_1.saveBorderArrInfo(_this.borderSize, _this.drawGraphPosition);
if (_this.screenShortController.value != null) {
// 修改鼠标状态为拖动
_this.screenShortController.value.style.cursor = "move";
// 复原拖动状态
_this.dragFlag = false;
// 显示截图工具栏
_this.data.setToolStatus(true);
vue_1.nextTick().then(function () {
var _a;
if (_this.toolController.value != null) {
// 计算截图工具栏位置
var toolLocation = CalculateToolLocation_1.calculateToolLocation(_this.drawGraphPosition, (_a = _this.toolController.value) === null || _a === void 0 ? void 0 : _a.offsetWidth);
// 当前截取的是全屏，则修改工具栏的位置到截图容器最底部，防止超出
if (_this.getFullScreenStatus) {
toolLocation.mouseY -= 64;
}
// 设置截图工具栏位置
_this.data.setToolInfo(toolLocation.mouseX, toolLocation.mouseY);
// 状态重置
_this.getFullScreenStatus = false;
}
});
}
};
/**
* 裁剪框工具栏点击事件
* @param toolName
* @param index
* @param mouseEvent
*/
this.toolClickEvent = function (toolName, index, mouseEvent) {
var _a;
// 更新当前点击的工具栏条目
_this.toolName = toolName;
var screenShortController = _this.data.getScreenShortController();
var ScreenShortImageController = _this.data.getScreenShortImageController();
if (screenShortController.value == null ||
ScreenShortImageController == null)
return;
// 获取canvas容器
var screenShortCanvas = screenShortController.value.getContext("2d");
// 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框
if (!_this.data.getToolClickStatus().value) {
// 获取裁剪框位置信息
var cutBoxPosition = _this.data.getCutOutBoxPosition();
// 开始绘制无像素点裁剪框
DrawCutOutBox_1.drawCutOutBox(cutBoxPosition.startX, cutBoxPosition.startY, cutBoxPosition.width, cutBoxPosition.height, screenShortCanvas, _this.borderSize, screenShortController.value, ScreenShortImageController, false);
}
_this.data.setToolName(toolName);
// 为当前点击项添加选中时的class名
SetSelectedClassName_1.setSelectedClassName(mouseEvent, index, false);
if (toolName != "text") {
// 显示画笔选择工具栏
_this.data.setOptionStatus(true);
// 设置画笔选择工具栏三角形角标位置
_this.data.setOptionIcoPosition(CalculateOptionIcoPosition_1.calculateOptionIcoPosition(index));
}
else {
// 隐藏画笔工具栏
_this.data.setOptionStatus(false);
}
// 清空文本输入区域的内容并隐藏文本输入框
if (((_a = _this.textInputController) === null || _a === void 0 ? void 0 : _a.value) != null && _this.data.getTextStatus()) {
_this.textInputController.value.innerHTML = "";
_this.data.setTextStatus(false);
}
// 初始化点击状态
_this.dragging = false;
_this.draggingTrim = false;
// 保存图片
if (toolName == "save") {
_this.getCanvasImgData(true);
}
// 销毁组件
if (toolName == "close") {
_this.resetComponent();
}
// 确认截图
if (toolName == "confirm" && _this.screenShortCanvas && _this.emit) {
var base64 = _this.getCanvasImgData(false);
_this.emit("get-image-data", base64);
}
// 撤销
if (toolName == "undo") {
// 隐藏画笔选项工具栏
_this.data.setOptionStatus(false);
_this.takeOutHistory();
}
// 设置裁剪框工具栏为点击状态
_this.data.setToolClickStatus(true);
};
/**
* 重置组件
*/
this.resetComponent = function () {
if (_this.emit) {
// 隐藏截图工具栏
_this.data.setToolStatus(false);
// 初始化响应式变量
_this.data.setInitStatus(true);
// 销毁组件
_this.emit("destroy-component", false);
return;
}
throw "组件重置失败";
};
/**
* 将指定区域的canvas转为图片
* @private
*/
this.getCanvasImgData = function (isSave) {
// 获取裁剪区域位置信息
var _a = _this.data.getCutOutBoxPosition(), startX = _a.startX, startY = _a.startY, width = _a.width, height = _a.height;
var base64 = "";
// 保存图片,需要减去八个点的大小
if (_this.screenShortCanvas) {
if (isSave) {
// 将canvas转为图片
SaveCanvasToImage_1.saveCanvasToImage(_this.screenShortCanvas, startX, startY, width, height);
}
else {
// 将canvas转为base64
base64 = SaveCanvasToBase64_1.saveCanvasToBase64(_this.screenShortCanvas, startX, startY, width, height);
}
}
// 重置组件
_this.resetComponent();
return base64;
};
// 实例化响应式data
this.data = new InitData_1["default"]();
// 获取截图区域canvas容器
this.screenShortController = this.data.getScreenShortController();
this.toolController = this.data.getToolController();
this.textInputController = this.data.getTextInputController();
this.optionController = this.data.getOptionController();
this.optionIcoController = this.data.getOptionIcoController();
this.videoController = document.createElement("video");
this.videoController.autoplay = true;
this.screenShortImageController = document.createElement("canvas");
// 设置实例与属性
this.data.setPropsData(context.emit);
vue_1.onMounted(function () {
var _a;
_this.emit = _this.data.getEmit();
var plugInParameters = new PlugInParameters_1["default"]();
// 单击截屏启用状态
_this.clickCutFullScreen = plugInParameters.getClickCutFullScreenStatus();
// 设置需要隐藏的工具栏图标
_this.data.setHiddenToolIco(plugInParameters.getHiddenToolIco());
// 设置截图区域canvas宽高
_this.data.setScreenShortInfo(window.innerWidth, window.innerHeight);
if (_this.screenShortImageController == null)
return;
// 设置截图图片存放容器宽高
_this.screenShortImageController.width = window.innerWidth;
_this.screenShortImageController.height = window.innerHeight;
if (plugInParameters.getWebRtcStatus()) {
// 设置为屏幕宽高
_this.data.setScreenShortInfo(window.screen.width, window.screen.height);
// 设置为屏幕宽高
_this.screenShortImageController.width = window.screen.width;
_this.screenShortImageController.height = window.screen.height;
}
// 获取截图区域画canvas容器画布
var context = (_a = _this.screenShortController.value) === null || _a === void 0 ? void 0 : _a.getContext("2d");
if (context == null)
return;
if (!plugInParameters.getWebRtcStatus()) {
console.log("####################### test patch package 截屏 #######################");
console.log("####################### html2canvas截屏 #######################");
// html2canvas截屏
html2canvas_1["default"](document.body, { useCORS: true, allowTaint: true }).then(function (canvas) {
var _a, _b, _c;
// 装载截图的dom为null则退出
if (_this.screenShortController.value == null)
return;
// 调整截屏容器层级
_this.screenShortController.value.style.zIndex =
plugInParameters.getLevel() + "";
// 调整截图工具栏层级
if (_this.toolController.value == null)
return;
_this.toolController.value.style.zIndex = "" + (plugInParameters.getLevel() +
1);
// 存放html2canvas截取的内容
_this.screenShortImageController = canvas;
// 存储屏幕截图
_this.data.setScreenShortImageController(canvas);
// 赋值截图区域canvas画布
_this.screenShortCanvas = context;
// 绘制蒙层
DrawMasking_1.drawMasking(context);
// 添加监听
(_a = _this.screenShortController.value) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", _this.mouseDownEvent);
(_b = _this.screenShortController.value) === null || _b === void 0 ? void 0 : _b.addEventListener("mousemove", _this.mouseMoveEvent);
(_c = _this.screenShortController.value) === null || _c === void 0 ? void 0 : _c.addEventListener("mouseup", _this.mouseUpEvent);
});
return;
}
// 开始捕捉屏幕
_this.startCapture().then(function () {
setTimeout(function () {
var _a, _b, _c;
// 装载截图的dom为null则退出
if (_this.screenShortController.value == null)
return;
if (_this.screenShortImageController == null)
return;
var imageContext = _this.screenShortImageController.getContext("2d");
if (imageContext == null)
return;
// 将获取到的屏幕截图绘制到图片容器里
imageContext.drawImage(_this.videoController, 0, 0, _this.screenShortImageController.width, _this.screenShortImageController.height);
// 存储屏幕截图
_this.data.setScreenShortImageController(_this.screenShortImageController);
// 赋值截图区域canvas画布
_this.screenShortCanvas = context;
// 绘制蒙层
DrawMasking_1.drawMasking(context);
// 添加监听
(_a = _this.screenShortController.value) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", _this.mouseDownEvent);
(_b = _this.screenShortController.value) === null || _b === void 0 ? void 0 : _b.addEventListener("mousemove", _this.mouseMoveEvent);
(_c = _this.screenShortController.value) === null || _c === void 0 ? void 0 : _c.addEventListener("mouseup", _this.mouseUpEvent);
// 停止捕捉屏幕
_this.stopCapture();
// 调整截屏容器层级
_this.screenShortController.value.style.zIndex =
plugInParameters.getLevel() + "";
// 调整截图工具栏层级
if (_this.toolController.value == null)
return;
_this.toolController.value.style.zIndex = "" + (plugInParameters.getLevel() +
1);
}, 500);
});
});
vue_1.onUnmounted(function () {
// 初始化initData中的数据
_this.data.setInitStatus(true);
});
}
/**
* 操作裁剪框
* @param currentX 裁剪框当前x轴坐标
* @param currentY 裁剪框当前y轴坐标
* @param startX 鼠标x轴坐标
* @param startY 鼠标y轴坐标
* @param width 裁剪框宽度
* @param height 裁剪框高度
* @param context 需要进行绘制的canvas画布
* @private
*/
EventMonitoring.prototype.operatingCutOutBox = function (currentX, currentY, startX, startY, width, height, context) {
// canvas元素不存在
if (this.screenShortController.value == null) {
return;
}
// 获取鼠标按下时的坐标
var _a = this.movePosition, moveStartX = _a.moveStartX, moveStartY = _a.moveStartY;
// 裁剪框边框节点事件存在且裁剪框未进行操作，则对鼠标样式进行修改
if (this.cutOutBoxBorderArr.length > 0 && !this.draggingTrim) {
// 标识鼠标是否在裁剪框内
var flag = false;
// 判断鼠标位置
context.beginPath();
for (var i = 0; i < this.cutOutBoxBorderArr.length; i++) {
context.rect(this.cutOutBoxBorderArr[i].x, this.cutOutBoxBorderArr[i].y, this.cutOutBoxBorderArr[i].width, this.cutOutBoxBorderArr[i].height);
// 当前坐标点处于8个可操作点上，修改鼠标指针样式
if (context.isPointInPath(currentX, currentY)) {
switch (this.cutOutBoxBorderArr[i].index) {
case 1:
if (this.data.getToolClickStatus().value) {
this.screenShortController.value.style.cursor = "crosshair";
}
else {
this.screenShortController.value.style.cursor = "move";
}
break;
case 2:
// 工具栏被点击则不改变指针样式
if (this.data.getToolClickStatus().value)
break;
this.screenShortController.value.style.cursor = "ns-resize";
break;
case 3:
// 工具栏被点击则不改变指针样式
if (this.data.getToolClickStatus().value)
break;
this.screenShortController.value.style.cursor = "ew-resize";
break;
case 4:
// 工具栏被点击则不改变指针样式
if (this.data.getToolClickStatus().value)
break;
this.screenShortController.value.style.cursor = "nwse-resize";
break;
case 5:
// 工具栏被点击则不改变指针样式
if (this.data.getToolClickStatus().value)
break;
this.screenShortController.value.style.cursor = "nesw-resize";
break;
default:
break;
}
this.borderOption = this.cutOutBoxBorderArr[i].option;
flag = true;
break;
}
}
context.closePath();
if (!flag) {
// 鼠标移出裁剪框重置鼠标样式
this.screenShortController.value.style.cursor = "default";
// 重置当前操作的边框节点为null
this.borderOption = null;
}
}
// 裁剪框正在被操作
if (this.draggingTrim) {
// 当前操作节点为1时则为移动裁剪框
if (this.borderOption === 1) {
// 计算要移动的x轴坐标
var x = FixedData_1.fixedData(currentX - (moveStartX - startX), width, this.screenShortController.value.width);
// 计算要移动的y轴坐标
var y = FixedData_1.fixedData(currentY - (moveStartY - startY), height, this.screenShortController.value.height);
// 重新绘制裁剪框
this.tempGraphPosition = DrawCutOutBox_1.drawCutOutBox(x, y, width, height, context, this.borderSize, this.screenShortController.value, this.screenShortImageController);
}
else {
// 裁剪框其他8个点的拖拽事件
var _b = ZoomCutOutBoxPosition_1.zoomCutOutBoxPosition(currentX, currentY, startX, startY, width, height, this.borderOption), tempStartX = _b.tempStartX, tempStartY = _b.tempStartY, tempWidth = _b.tempWidth, tempHeight = _b.tempHeight;
// 绘制裁剪框
this.tempGraphPosition = DrawCutOutBox_1.drawCutOutBox(tempStartX, tempStartY, tempWidth, tempHeight, context, this.borderSize, this.screenShortController.value, this.screenShortImageController);
}
}
};
/**
* 保存当前画布状态
* @private
*/
EventMonitoring.prototype.addHistory = function () {
if (this.screenShortCanvas != null &&
this.screenShortController.value != null) {
// 获取canvas画布与容器
var context_1 = this.screenShortCanvas;
var controller = this.screenShortController.value;
if (this.history.length > this.maxUndoNum) {
// 删除最早的一条画布记录
this.history.shift();
}
// 保存当前画布状态
this.history.push({
data: context_1.getImageData(0, 0, controller.width, controller.height)
});
// 启用撤销按钮
this.data.setUndoStatus(true);
}
};
/**
* 显示最新的画布状态
* @private
*/
EventMonitoring.prototype.showLastHistory = function () {
if (this.screenShortCanvas != null) {
var context_2 = this.screenShortCanvas;
if (this.history.length <= 0) {
this.addHistory();
}
context_2.putImageData(this.history[this.history.length - 1]["data"], 0, 0);
}
};
/**
* 取出一条历史记录
*/
EventMonitoring.prototype.takeOutHistory = function () {
var lastImageData = this.history.pop();
if (this.screenShortCanvas != null && lastImageData) {
var context_3 = this.screenShortCanvas;
if (this.undoClickNum == 0 && this.history.length > 0) {
// 首次取出需要取两条历史记录
var firstPopImageData = this.history.pop();
context_3.putImageData(firstPopImageData["data"], 0, 0);
}
else {
context_3.putImageData(lastImageData["data"], 0, 0);
}
}
this.undoClickNum++;
// 历史记录已取完，禁用撤回按钮点击
if (this.history.length <= 0) {
this.undoClickNum = 0;
this.data.setUndoStatus(false);
}
};
return EventMonitoring;
}());
exports["default"] = EventMonitoring;