@ibiz-template/vue3-components 0.7.41-alpha.45 → 0.7.41-alpha.46

package/es/util/screen-shot-util/screen-shot/controller/screen-shot.controller.mjs

@@ -0,0 +1,366 @@
+import { domToCanvas } from '../../../../node_modules/.pnpm/modern-screenshot@4.6.7/node_modules/modern-screenshot/dist/index.mjs';
+import { ScreenShotStore } from './screen-shot.store.mjs';
+import { ToolbarItemType } from '../type/index.mjs';
+import '../module/index.mjs';
+import { getMousePosition } from '../util/index.mjs';
+import { DrawArrow } from '../module/draw-arrow.mjs';
+import { drawText } from '../module/draw-text.mjs';
+import { initPencil, drawPencil } from '../module/draw-pencil.mjs';
+import { drawMosaic } from '../module/draw-mosaic.mjs';
+import { drawCircle } from '../module/draw-circle.mjs';
+import { drawRectangle } from '../module/draw-rectangle.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ScreenShotController {
+  /**
+   * Creates an instance of ScreenShotController.
+   * @memberof ScreenShotController
+   */
+  constructor() {
+    /**
+     * @description 状态对象
+     * @type {ScreenShotState}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "store");
+    /**
+     * @description 当前工具
+     * @private
+     * @type {ToolbarItemType}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "toolName");
+    /**
+     * @description 画笔配置
+     * @private
+     * @type {IBrushOption}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "brushOption");
+    /**
+     * @description 画布上下文
+     * @private
+     * @type {(CanvasRenderingContext2D | undefined)}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "canvasCtx");
+    /**
+     * @description 绘制状态
+     * @private
+     * @type {boolean}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "drawing", false);
+    /**
+     * @description 最大可撤销次数
+     * @private
+     * @type {number}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "maxUndoNum", 15);
+    /**
+     * @description 文本输入框位置
+     * @private
+     * @type {IMousePosition}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "textInputInfo", {
+      mouseX: 0,
+      mouseY: 0,
+      size: 14,
+      color: "#F53340"
+    });
+    /**
+     * @description 图形位置参数
+     * @private
+     * @type {IMousePosition}
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "drawGraphPosition", {
+      mouseX: 0,
+      mouseY: 0
+    });
+    /**
+     * @description 递增变粗箭头的实现
+     * @private
+     * @memberof ScreenShotController
+     */
+    __publicField(this, "drawArrow", new DrawArrow());
+    this.store = new ScreenShotStore();
+  }
+  /**
+   * @description 显示最新的画布状态
+   * @private
+   * @memberof ScreenShotController
+   */
+  showLastHistory() {
+    if (!this.canvasCtx)
+      return;
+    if (this.store.history.value.length <= 0)
+      this.addHistory();
+    const data = this.store.history.value[this.store.history.value.length - 1].data;
+    this.canvasCtx.putImageData(data, 0, 0);
+  }
+  /**
+   * @description 添加历史
+   * @private
+   * @memberof ScreenShotController
+   */
+  addHistory() {
+    if (!this.store.canvasElement.value || !this.canvasCtx)
+      return;
+    if (this.store.history.value.length > this.maxUndoNum)
+      this.store.history.value.shift();
+    const controller = this.store.canvasElement.value;
+    this.store.history.value.push({
+      data: this.canvasCtx.getImageData(
+        0,
+        0,
+        controller.width,
+        controller.height
+      )
+    });
+  }
+  /**
+   * @description 回退历史
+   * @private
+   * @memberof ScreenShotController
+   */
+  goBackToHistory() {
+    var _a;
+    if (!this.store.history.value.length)
+      return;
+    this.store.history.value.pop();
+    const data = (_a = this.store.history.value[this.store.history.value.length - 1]) == null ? void 0 : _a.data;
+    if (this.canvasCtx && data)
+      this.canvasCtx.putImageData(data, 0, 0);
+  }
+  /**
+   * @description 启用文本编辑
+   * @private
+   * @param {number} X
+   * @param {number} Y
+   * @returns {*}  {void}
+   * @memberof ScreenShotController
+   */
+  enableTextEditing(event) {
+    const element = this.store.textInputElement.value;
+    if (!this.canvasCtx || !element || !this.brushOption)
+      return;
+    this.showLastHistory();
+    this.store.textStatus.value = true;
+    const { clientX, clientY } = event;
+    const { mouseX, mouseY, size, color } = this.textInputInfo;
+    const position = getMousePosition(event);
+    if (element.innerText && mouseX !== 0 && mouseY !== 0 && mouseX !== position.mouseX && mouseY !== position.mouseY) {
+      drawText(
+        element.innerText,
+        this.textInputInfo.mouseX,
+        this.textInputInfo.mouseY,
+        color,
+        size,
+        this.canvasCtx
+      );
+      element.innerText = "";
+      this.addHistory();
+    }
+    element.style.fontFamily = "none";
+    element.style.left = "".concat(clientX, "px");
+    element.style.fontSize = "".concat(this.brushOption.size, "px");
+    element.style.color = this.brushOption.color;
+    setTimeout(() => {
+      const containerHeight = element.offsetHeight;
+      element.style.top = "".concat(clientY - Math.floor(containerHeight / 2), "px");
+      element.focus();
+      this.textInputInfo = {
+        mouseX: position.mouseX,
+        mouseY: position.mouseY,
+        size: this.brushOption.size,
+        color: this.brushOption.color
+      };
+    });
+  }
+  /**
+   * @description 结束文本编辑
+   * @private
+   * @returns {*}  {void}
+   * @memberof ScreenShotController
+   */
+  endTextEditing() {
+    const element = this.store.textInputElement.value;
+    if (!element || !this.canvasCtx)
+      return;
+    if (element.innerText) {
+      const { mouseX, mouseY, size, color } = this.textInputInfo;
+      drawText(element.innerText, mouseX, mouseY, color, size, this.canvasCtx);
+      this.addHistory();
+    }
+    element.innerHTML = "";
+    this.store.textStatus.value = false;
+  }
+  /**
+   * @description DOM生成Canvas
+   * @param {HTMLElement} el DOM元素
+   * @param {{ container?: HTMLElement; itemClassName?: string }} opts 如果需针对dom内部滚动容器截图，则需配置：滚动容器，滚动容器项类名，用以排除非可视区元素
+   * @returns {*}  {Promise<void>}
+   * @memberof ScreenShotController
+   */
+  async domToCanvas(el, opts) {
+    var _a;
+    this.store.isLoading.value = true;
+    const { container, itemClassName } = opts;
+    const containerRect = container == null ? void 0 : container.getBoundingClientRect();
+    const canvas = await domToCanvas(el, {
+      scale: window.devicePixelRatio || 1,
+      quality: 1,
+      filter: (node) => {
+        var _a2, _b;
+        if (containerRect && itemClassName) {
+          const element = node;
+          if ((container == null ? void 0 : container.contains(element)) && ((_a2 = element.classList) == null ? void 0 : _a2.contains(itemClassName))) {
+            const elementRect = (_b = element.getBoundingClientRect) == null ? void 0 : _b.call(element);
+            if (elementRect)
+              return elementRect.bottom > containerRect.top && elementRect.top < containerRect.bottom && elementRect.right > containerRect.left && elementRect.left < containerRect.right;
+          }
+        }
+        return true;
+      }
+    });
+    this.canvasCtx = (_a = this.store.canvasElement.value) == null ? void 0 : _a.getContext("2d");
+    if (this.canvasCtx) {
+      this.store.canvasElement.value.width = canvas.width;
+      this.store.canvasElement.value.height = canvas.height;
+      this.store.canvasElement.value.style.top = "".concat(el.offsetTop, "px");
+      this.store.canvasElement.value.style.left = "".concat(el.offsetLeft, "px");
+      this.canvasCtx.drawImage(canvas, 0, 0);
+    }
+    this.store.isLoading.value = false;
+    this.store.toolbarStatus.value = true;
+  }
+  /**
+   * @description 工具点击
+   * @param {ToolbarItemType} toolName
+   * @param {IBrushOption} opt
+   * @memberof ScreenShotController
+   */
+  onToolClick(toolName, opt) {
+    if (toolName === ToolbarItemType.DRAWDOWN)
+      this.goBackToHistory();
+    this.brushOption = opt;
+    this.toolName = toolName;
+    this.endTextEditing();
+  }
+  /**
+   * @description 鼠标按下
+   * @param {MouseEvent} event
+   * @memberof ScreenShotController
+   */
+  mouseDownEvent(event) {
+    if (event.button !== 0 || !this.toolName || this.toolName === ToolbarItemType.DRAWDOWN || !this.canvasCtx)
+      return;
+    this.drawing = true;
+    const { mouseX, mouseY } = getMousePosition(event);
+    Object.assign(this.drawGraphPosition, {
+      mouseX,
+      mouseY
+    });
+    switch (this.toolName) {
+      case ToolbarItemType.BRUSH:
+        initPencil(this.canvasCtx, mouseX, mouseY);
+        break;
+      case ToolbarItemType.TEXT:
+        this.enableTextEditing(event);
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * @description 鼠标移动
+   * @param {MouseEvent} event
+   * @returns {*}  {void}
+   * @memberof ScreenShotController
+   */
+  mouseMoveEvent(event) {
+    if (!this.toolName || !this.drawing || !this.canvasCtx || !this.brushOption)
+      return;
+    const { mouseX, mouseY } = getMousePosition(event);
+    const { mouseX: startX, mouseY: startY } = this.drawGraphPosition;
+    if (this.toolName !== ToolbarItemType.MOSAIC)
+      this.showLastHistory();
+    switch (this.toolName) {
+      case ToolbarItemType.BRUSH:
+        drawPencil(
+          this.canvasCtx,
+          mouseX,
+          mouseY,
+          this.brushOption.size,
+          this.brushOption.color
+        );
+        break;
+      case ToolbarItemType.RECT:
+        drawRectangle(
+          startX,
+          startY,
+          mouseX - startX,
+          mouseY - startY,
+          this.brushOption.color,
+          this.brushOption.size,
+          this.canvasCtx
+        );
+        break;
+      case ToolbarItemType.CIRCLE:
+        drawCircle(
+          this.canvasCtx,
+          mouseX,
+          mouseY,
+          startX,
+          startY,
+          this.brushOption.size,
+          this.brushOption.color
+        );
+        break;
+      case ToolbarItemType.ARROW:
+        this.drawArrow.draw(
+          this.canvasCtx,
+          startX,
+          startY,
+          mouseX,
+          mouseY,
+          this.brushOption.color
+        );
+        break;
+      case ToolbarItemType.MOSAIC:
+        drawMosaic(
+          mouseX - 10,
+          mouseY - 10,
+          this.brushOption.size,
+          5,
+          this.canvasCtx
+        );
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * @description 鼠标抬起
+   * @returns {*}  {void}
+   * @memberof ScreenShotController
+   */
+  mouseUpEvent() {
+    this.drawing = false;
+    if (!this.toolName || this.toolName === ToolbarItemType.DRAWDOWN || !this.canvasCtx)
+      return;
+    if (this.toolName !== ToolbarItemType.TEXT)
+      this.addHistory();
+  }
+}
+
+export { ScreenShotController };

package/es/util/screen-shot-util/screen-shot/controller/screen-shot.store.mjs

@@ -0,0 +1,51 @@
+import { ref } from 'vue';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ScreenShotStore {
+  constructor() {
+    /**
+     * @description 画布元素
+     * @type {(Ref<HTMLCanvasElement | undefined>)}
+     * @memberof ScreenShotStore
+     */
+    __publicField(this, "canvasElement", ref(void 0));
+    /**
+     * @description 文本输入框颜色
+     * @type {(Ref<HTMLCanvasElement | undefined>)}
+     * @memberof ScreenShotStore
+     */
+    __publicField(this, "textInputElement", ref(void 0));
+    /**
+     * @description 加载状态
+     * @type {Ref<boolean>}
+     * @memberof ScreenShotStore
+     */
+    __publicField(this, "isLoading", ref(false));
+    /**
+     * @description 文本状态
+     * @type {Ref<boolean>}
+     * @memberof ScreenShotStore
+     */
+    __publicField(this, "textStatus", ref(false));
+    /**
+     * @description 工具栏状态
+     * @type {Ref<boolean>}
+     * @memberof ScreenShotStore
+     */
+    __publicField(this, "toolbarStatus", ref(false));
+    /**
+     * @description 历史
+     * @type {Ref<{ data: ImageData }[]>}
+     * @memberof ScreenShotStore
+     */
+    __publicField(this, "history", ref([]));
+  }
+}
+
+export { ScreenShotStore };

package/es/util/screen-shot-util/screen-shot/icon/icon.mjs

@@ -0,0 +1,90 @@
+import { createVNode } from 'vue';
+
+"use strict";
+const BrushIcon = createVNode("svg", {
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "72848"
+}, [createVNode("path", {
+  "d": "M1.704 971.096l77.824-281.16L746.568 23.12c30.992-30.992 70.944-30.64 101.76 0l152.56 152.544c30.64 30.648 30.992 70.592 0 101.76L334.192 944.4l-281.52 77.824c-38.744 8.096-58.888-12.048-50.968-51.136z m668.76-769.952l152.56 152.368 101.76-101.752c26.336-26.168 24.616-26 0-50.792l-101.76-101.584c-24.112-26-26.352-26-50.8 0l-101.76 101.76z m-483.488 483.28l152.552 152.552L772.056 404.48 619.496 251.92 186.976 684.432zM78.672 945.28l210.064-57.504-152.56-152.544-57.504 210.048z",
+  "p-id": "72849"
+}, null)]);
+const RectIcon = createVNode("svg", {
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "64858"
+}, [createVNode("path", {
+  "d": "M26.962385 997.037615v-970.07523h970.07523v970.07523h-970.07523z m913.011981-913.011981h-855.948732v855.948732h855.948732v-855.948732z",
+  "p-id": "64859"
+}, null)]);
+const CircleIcon = createVNode("svg", {
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "65871"
+}, [createVNode("path", {
+  "d": "M510.633 120.298c52.92 0 104.269 10.302 152.555 30.725 46.625 19.729 88.611 47.922 124.562 83.795 36.041 35.963 64.295 77.773 83.977 124.293 20.468 48.182 30.791 99.42 30.791 152.231 0 52.806-10.323 104.044-30.791 152.225-19.767 46.524-48.022 88.419-83.977 124.293-36.041 35.963-77.937 64.156-124.562 83.795-48.286 20.424-99.635 30.725-152.555 30.725-52.926 0-104.274-10.301-152.561-30.725-46.621-19.724-88.611-47.918-124.562-83.795-36.041-35.963-64.295-77.768-83.977-124.293-20.467-48.182-30.791-99.42-30.791-152.225 0-52.811 10.324-104.049 30.791-152.231 19.771-46.52 48.026-88.419 83.977-124.293 35.951-35.873 77.941-64.156 124.562-83.795 48.287-20.423 99.636-30.725 152.561-30.725m0-55.862c-247.382 0-447.873 200.058-447.873 446.905 0 246.842 200.491 446.9 447.873 446.9 247.377 0 447.868-200.058 447.868-446.9 0-246.847-200.491-446.905-447.868-446.905z m0 0",
+  "p-id": "65872"
+}, null)]);
+const MarkerIcon = createVNode("svg", {
+  "preserveAspectRatio": "none",
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "55036"
+}, [createVNode("path", {
+  "d": "M512.01893 1.779421c-282.28432 0-511.110289 228.82597-511.110289 511.110289s228.82597 511.110289 511.110289 511.110289c282.26539 0 511.091359-228.82597 511.091359-511.110289S794.28432 1.779421 512.01893 1.779421zM512 986.139979c-261.366658 0-473.250268-211.88361-473.250268-473.250268 0-261.385588 211.88361-473.250268 473.250268-473.250268 261.385588 0 473.269198 211.88361 473.269198 473.250268C985.269198 774.237439 773.385588 986.139979 512 986.139979zM406.90058 399.309646l0 56.790032c40.207343-16.544829 71.574371-33.108589 94.063223-49.691278l0 269.752653 58.550523 0L559.514327 301.706511l-44.353015 0C502.118534 341.932784 466.037934 374.454542 406.90058 399.309646z",
+  "p-id": "55037"
+}, null)]);
+const TextIcon = createVNode("svg", {
+  "preserveAspectRatio": "none",
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "17173"
+}, [createVNode("path", {
+  "d": "M832 896H730.56l-72.576-210.24H361.856L293.44 896H192l270.848-768h98.24L832 896zM629.504 598.976L522.112 279.68c-3.392-10.176-7.04-28.096-11.008-53.504H508.8c-3.392 23.168-7.232 40.96-11.456 53.504l-106.56 319.296h238.72z",
+  "p-id": "17174"
+}, null)]);
+const ArrowIcon = createVNode("svg", {
+  "preserveAspectRatio": "none",
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "23296"
+}, [createVNode("path", {
+  "d": "M738.133333 256L230.4 763.733333l29.866667 29.866667L768 285.866667V554.666667h42.666667V213.333333h-341.333334v42.666667h268.8z",
+  "p-id": "23297"
+}, null)]);
+const AIIcon = createVNode("svg", {
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "preserveAspectRatio": "none",
+  "viewBox": "0 0 1024 1024"
+}, [createVNode("path", {
+  "d": "M274.344554 173.673875c16.429399 0 30.950568 8.00526 39.956484 20.338945a34.906655 34.906655 0 0 1 14.660796 15.754537l1.117013 2.815803 210.138065 597.927736c6.795162 19.268474-5.329083 40.817516-27.041022 48.147913-20.641469 6.95806-42.493035-1.419537-50.451753-18.803052l-1.117013-2.815803-54.477653-154.939008H134.997185L80.566074 837.039954c-6.771891 19.268474-29.856826 28.949253-51.568765 21.618855-20.641469-6.981331-32.602816-26.761769-27.925325-45.239025l0.861031-2.908888L212.047809 212.58316c4.025901-11.426112 13.799764-19.477914 25.598214-22.619512 9.029188-10.006575 22.107548-16.289773 36.67526-16.289773z m386.416675 169.460176c21.828295 0 39.723774 10.890876 41.469106 24.713912l0.116356 2.210755v461.652153c0 14.893506-18.616883 26.947938-41.585462 26.947938-21.805024 0-39.700503-10.890876-41.422565-24.737183l-0.162897-2.210755V370.081989c0-14.870235 18.616883-26.924667 41.585462-26.924667z m-389.697901-48.171184L163.620643 600.628812h214.88537l-107.442685-305.665945z m602.163076-206.181978a12.566396 12.566396 0 0 1 8.144887 8.051802l32.509731 99.041817 101.694723 36.07021a12.566396 12.566396 0 0 1-0.791218 23.922695l-99.53051 27.995137-30.857483 97.552467a12.566396 12.566396 0 0 1-23.899423 0.116355l-32.509732-99.018546-98.669479-31.322905a12.566396 12.566396 0 0 1-0.186169-23.876152l97.505924-32.812256 30.834212-97.529195a12.566396 12.566396 0 0 1 15.754537-8.191429zM649.544557 0.513593c2.676177 0.884302 4.770576 3.025243 5.608336 5.724692l18.523798 59.294772 60.970292 20.66474a8.796477 8.796477 0 0 1-0.325796 16.755194l-60.73758 18.058377-19.780438 59.550754a8.796477 8.796477 0 0 1-16.731924-0.162898l-18.523798-59.271501-59.062061-17.825665a8.796477 8.796477 0 0 1-0.395609-16.708653l59.574025-20.943993 19.780438-59.574025a8.796477 8.796477 0 0 1 11.100317-5.561794z"
+}, null)]);
+const MosaicIcon = createVNode("svg", {
+  "class": "icon",
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "73852"
+}, [createVNode("path", {
+  "d": "M512 64h448v896H64V64h448z m192 64h-192v384h384V128h-192zM320 512H128v384h384V512h-192z",
+  "p-id": "73853"
+}, null)]);
+const DrawdownIcon = createVNode("svg", {
+  "class": "icon",
+  "viewBox": "0 0 1024 1024",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "p-id": "80469"
+}, [createVNode("path", {
+  "d": "M341.333333 298.666667v170.666666L85.333333 256l256-213.333333v170.666666h213.333334a341.333333 341.333333 0 1 1 0 682.666667H170.666667v-85.333333h384a256 256 0 0 0 0-512H341.333333z",
+  "p-id": "80470"
+}, null)]);
+
+export { AIIcon, ArrowIcon, BrushIcon, CircleIcon, DrawdownIcon, MarkerIcon, MosaicIcon, RectIcon, TextIcon };

package/es/util/screen-shot-util/screen-shot/icon/index.mjs

@@ -0,0 +1,3 @@
+export { AIIcon, ArrowIcon, BrushIcon, CircleIcon, DrawdownIcon, MarkerIcon, MosaicIcon, RectIcon, TextIcon } from './icon.mjs';
+
+"use strict";

package/es/util/screen-shot-util/screen-shot/index.mjs

@@ -0,0 +1,4 @@
+import './components/index.mjs';
+export { ScreenShot } from './components/screen-shot/screen-shot.mjs';
+
+"use strict";

package/es/util/screen-shot-util/screen-shot/module/draw-arrow.mjs

@@ -0,0 +1,109 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DrawArrow {
+  constructor() {
+    // 起始点与结束点
+    __publicField(this, "beginPoint", { x: 0, y: 0 });
+    __publicField(this, "stopPoint", { x: 0, y: 0 });
+    // 多边形的尺寸信息
+    __publicField(this, "polygonVertex", []);
+    // 起点与X轴之间的夹角角度值
+    __publicField(this, "angle", 0);
+    // 箭头信息
+    __publicField(this, "arrowInfo", {
+      edgeLen: 50,
+      // 箭头的头部长度
+      angle: 30
+      // 箭头的头部角度
+    });
+  }
+  /**
+   * 绘制箭头
+   * @param ctx 需要进行绘制的画布
+   * @param originX 鼠标按下时的x轴坐标
+   * @param originY 鼠标按下式的y轴坐标
+   * @param x 当前鼠标x轴坐标
+   * @param y 当前鼠标y轴坐标
+   * @param color 箭头颜色
+   */
+  draw(ctx, originX, originY, x, y, color) {
+    this.beginPoint.x = originX;
+    this.beginPoint.y = originY;
+    this.stopPoint.x = x;
+    this.stopPoint.y = y;
+    this.arrowCord(this.beginPoint, this.stopPoint);
+    this.sideCord();
+    this.drawArrow(ctx, color);
+  }
+  // 在画布上画出递增变粗的箭头
+  drawArrow(ctx, color) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(this.polygonVertex[0], this.polygonVertex[1]);
+    ctx.lineTo(this.polygonVertex[2], this.polygonVertex[3]);
+    ctx.lineTo(this.polygonVertex[4], this.polygonVertex[5]);
+    ctx.lineTo(this.polygonVertex[6], this.polygonVertex[7]);
+    ctx.lineTo(this.polygonVertex[8], this.polygonVertex[9]);
+    ctx.lineTo(this.polygonVertex[10], this.polygonVertex[11]);
+    ctx.closePath();
+    ctx.fill();
+  }
+  /**
+   * 设置箭头的相关绘制信息
+   * @param edgeLen 长度
+   * @param angle 角度
+   * @private
+   */
+  setArrowInfo(edgeLen, angle) {
+    this.arrowInfo.edgeLen = edgeLen;
+    this.arrowInfo.angle = angle;
+  }
+  // 计算箭头尺寸
+  dynArrowSize() {
+    const x = this.stopPoint.x - this.beginPoint.x;
+    const y = this.stopPoint.y - this.beginPoint.y;
+    const length = Math.sqrt(x ** 2 + y ** 2);
+    if (length < 50) {
+      this.arrowInfo.edgeLen = length / 2;
+    } else if (length < 250) {
+      this.arrowInfo.edgeLen /= 2;
+    } else if (length < 500) {
+      this.arrowInfo.edgeLen = this.arrowInfo.edgeLen * length / 500;
+    }
+  }
+  // 计算起点与X轴之间的夹角角度值
+  getRadian(beginPoint, stopPoint) {
+    this.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
+    this.setArrowInfo(50, 30);
+    this.dynArrowSize();
+  }
+  // 计算箭头底边两个点位置信息
+  arrowCord(beginPoint, stopPoint) {
+    this.polygonVertex[0] = beginPoint.x;
+    this.polygonVertex[1] = beginPoint.y;
+    this.polygonVertex[6] = stopPoint.x;
+    this.polygonVertex[7] = stopPoint.y;
+    this.getRadian(beginPoint, stopPoint);
+    this.polygonVertex[8] = stopPoint.x - this.arrowInfo.edgeLen * Math.cos(Math.PI / 180 * (this.angle + this.arrowInfo.angle));
+    this.polygonVertex[9] = stopPoint.y - this.arrowInfo.edgeLen * Math.sin(Math.PI / 180 * (this.angle + this.arrowInfo.angle));
+    this.polygonVertex[4] = stopPoint.x - this.arrowInfo.edgeLen * Math.cos(Math.PI / 180 * (this.angle - this.arrowInfo.angle));
+    this.polygonVertex[5] = stopPoint.y - this.arrowInfo.edgeLen * Math.sin(Math.PI / 180 * (this.angle - this.arrowInfo.angle));
+  }
+  // 计算另两个底边侧面点
+  sideCord() {
+    const midpoint = { x: 0, y: 0 };
+    midpoint.x = (this.polygonVertex[4] + this.polygonVertex[8]) / 2;
+    midpoint.y = (this.polygonVertex[5] + this.polygonVertex[9]) / 2;
+    this.polygonVertex[2] = (this.polygonVertex[4] + midpoint.x) / 2;
+    this.polygonVertex[3] = (this.polygonVertex[5] + midpoint.y) / 2;
+    this.polygonVertex[10] = (this.polygonVertex[8] + midpoint.x) / 2;
+    this.polygonVertex[11] = (this.polygonVertex[9] + midpoint.y) / 2;
+  }
+}
+
+export { DrawArrow };

package/es/util/screen-shot-util/screen-shot/module/draw-circle.mjs

@@ -0,0 +1,25 @@
+"use strict";
+function drawCircle(context, mouseX, mouseY, mouseStartX, mouseStartY, borderWidth, color) {
+  const startX = mouseX < mouseStartX ? mouseX : mouseStartX;
+  const startY = mouseY < mouseStartY ? mouseY : mouseStartY;
+  const endX = mouseX >= mouseStartX ? mouseX : mouseStartX;
+  const endY = mouseY >= mouseStartY ? mouseY : mouseStartY;
+  const radiusX = (endX - startX) * 0.5;
+  const radiusY = (endY - startY) * 0.5;
+  const centerX = startX + radiusX;
+  const centerY = startY + radiusY;
+  context.save();
+  context.beginPath();
+  context.lineWidth = borderWidth;
+  context.strokeStyle = color;
+  if (typeof context.ellipse === "function") {
+    context.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+  } else {
+    throw new Error("\u4F60\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301ellipse\uFF0C\u65E0\u6CD5\u7ED8\u5236\u692D\u5706");
+  }
+  context.stroke();
+  context.closePath();
+  context.restore();
+}
+
+export { drawCircle };