bhd-components 0.9.0 → 0.9.2

package/esm/customerService/js-screen-shot/lib/main-entrance/PlugInParameters.d.ts

@@ -0,0 +1,46 @@
+export default class PlugInParameters {
+    constructor();
+    setInitStatus(status: boolean): void;
+    getInitStatus(): boolean;
+    getWebRtcStatus(): boolean;
+    setWebRtcStatus(status: boolean): void;
+    setScreenShotDom(dom: HTMLElement): void;
+    getCutBoxBdColor(): string;
+    setCutBoxBdColor(color: string): void;
+    getScreenShotDom(): HTMLElement;
+    getScreenFlow(): MediaStream;
+    setScreenFlow(stream: MediaStream): void;
+    getCanvasSize(): {
+        canvasWidth: number;
+        canvasHeight: number;
+    };
+    setCanvasSize(width: number, height: number): void;
+    getShowScreenDataStatus(): boolean;
+    setShowScreenDataStatus(status: boolean): void;
+    setMaskColor(color: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    }): void;
+    getMaskColor(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    setWriteImgState(state: boolean): void;
+    getWriteImgState(): boolean;
+    setSaveCallback(saveFn: (code: number, msg: string) => void): void;
+    getSaveCallback(): (code: number, msg: string) => void;
+    setMaxUndoNum(num: number): void;
+    getMaxUndoNum(): number;
+    setRatioArrow(state: boolean): void;
+    getRatioArrow(): boolean;
+    setImgAutoFit(state: boolean): void;
+    getImgAutoFit(): boolean;
+    setSaveImgTitle(title: string): void;
+    getSaveImgTitle(): string;
+    setDestroyContainerState(state: boolean): void;
+    getDestroyContainerState(): boolean;
+}

package/esm/customerService/js-screen-shot/lib/main-entrance/PlugInParameters.js

@@ -0,0 +1,259 @@
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+var enableWebRtc = true;
+// electron环境下使用webrtc需要自己传入屏幕流
+var screenFlow = null;
+// 数据初始化标识
+var initStatus = false;
+// 画布宽高
+var canvasWidth = 0;
+var canvasHeight = 0;
+// 展示截屏图片至容器
+var showScreenData = false;
+var screenShotDom = null;
+var destroyContainer = true;
+// 蒙层颜色
+var maskColor = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 0.6
+};
+var writeBase64 = true;
+var cutBoxBdColor = "#2CABFF";
+// 最大可撤销次数
+var maxUndoNum = 15;
+// 是否使用等比例箭头
+var useRatioArrow = false;
+// 开启图片自适应
+var imgAutoFit = false;
+var saveCallback = null;
+var saveImgTitle = null;
+var PlugInParameters = /*#__PURE__*/ function() {
+    "use strict";
+    function PlugInParameters() {
+        _class_call_check(this, PlugInParameters);
+        // 标识为true时则初始化数据
+        if (initStatus) {
+            enableWebRtc = true;
+            canvasWidth = 0;
+            canvasHeight = 0;
+            cutBoxBdColor = "#2CABFF";
+            showScreenData = false;
+            writeBase64 = true;
+            screenFlow = null;
+            // 初始化完成设置其值为false
+            initStatus = false;
+            screenShotDom = null;
+            saveCallback = null;
+            maxUndoNum = 15;
+            useRatioArrow = false;
+            imgAutoFit = false;
+            saveImgTitle = null;
+            destroyContainer = true;
+        }
+    }
+    _create_class(PlugInParameters, [
+        {
+            key: "setInitStatus",
+            value: // 设置数据初始化标识
+            function setInitStatus(status) {
+                initStatus = status;
+            }
+        },
+        {
+            key: "getInitStatus",
+            value: // 获取数据初始化标识
+            function getInitStatus() {
+                return initStatus;
+            }
+        },
+        {
+            key: "getWebRtcStatus",
+            value: // 获取webrtc启用状态
+            function getWebRtcStatus() {
+                return enableWebRtc;
+            }
+        },
+        {
+            key: "setWebRtcStatus",
+            value: // 设置webrtc启用状态
+            function setWebRtcStatus(status) {
+                enableWebRtc = status;
+            }
+        },
+        {
+            key: "setScreenShotDom",
+            value: function setScreenShotDom(dom) {
+                screenShotDom = dom;
+            }
+        },
+        {
+            key: "getCutBoxBdColor",
+            value: function getCutBoxBdColor() {
+                return cutBoxBdColor;
+            }
+        },
+        {
+            key: "setCutBoxBdColor",
+            value: function setCutBoxBdColor(color) {
+                cutBoxBdColor = color;
+            }
+        },
+        {
+            key: "getScreenShotDom",
+            value: function getScreenShotDom() {
+                return screenShotDom;
+            }
+        },
+        {
+            key: "getScreenFlow",
+            value: // 获取屏幕流
+            function getScreenFlow() {
+                return screenFlow;
+            }
+        },
+        {
+            key: "setScreenFlow",
+            value: // 设置屏幕流
+            function setScreenFlow(stream) {
+                screenFlow = stream;
+            }
+        },
+        {
+            key: "getCanvasSize",
+            value: // 获取画布宽高
+            function getCanvasSize() {
+                return {
+                    canvasWidth: canvasWidth,
+                    canvasHeight: canvasHeight
+                };
+            }
+        },
+        {
+            key: "setCanvasSize",
+            value: // 设置画布宽高
+            function setCanvasSize(width, height) {
+                canvasWidth = width;
+                canvasHeight = height;
+            }
+        },
+        {
+            key: "getShowScreenDataStatus",
+            value: // 获取展示图片至容器的状态
+            function getShowScreenDataStatus() {
+                return showScreenData;
+            }
+        },
+        {
+            key: "setShowScreenDataStatus",
+            value: // 设置展示图片至容器的状态
+            function setShowScreenDataStatus(status) {
+                showScreenData = status;
+            }
+        },
+        {
+            key: "setMaskColor",
+            value: // 设置蒙层颜色
+            function setMaskColor(color) {
+                maskColor.r = color.r;
+                maskColor.g = color.g;
+                maskColor.b = color.b;
+                maskColor.a = color.a;
+            }
+        },
+        {
+            key: "getMaskColor",
+            value: function getMaskColor() {
+                return maskColor;
+            }
+        },
+        {
+            key: "setWriteImgState",
+            value: // 设置截图数据的写入状态
+            function setWriteImgState(state) {
+                writeBase64 = state;
+            }
+        },
+        {
+            key: "getWriteImgState",
+            value: function getWriteImgState() {
+                return writeBase64;
+            }
+        },
+        {
+            key: "setSaveCallback",
+            value: function setSaveCallback(saveFn) {
+                saveCallback = saveFn;
+            }
+        },
+        {
+            key: "getSaveCallback",
+            value: function getSaveCallback() {
+                return saveCallback;
+            }
+        },
+        {
+            key: "setMaxUndoNum",
+            value: function setMaxUndoNum(num) {
+                maxUndoNum = num;
+            }
+        },
+        {
+            key: "getMaxUndoNum",
+            value: function getMaxUndoNum() {
+                return maxUndoNum;
+            }
+        },
+        {
+            key: "setRatioArrow",
+            value: function setRatioArrow(state) {
+                useRatioArrow = state;
+            }
+        },
+        {
+            key: "getRatioArrow",
+            value: function getRatioArrow() {
+                return useRatioArrow;
+            }
+        },
+        {
+            key: "setImgAutoFit",
+            value: function setImgAutoFit(state) {
+                imgAutoFit = state;
+            }
+        },
+        {
+            key: "getImgAutoFit",
+            value: function getImgAutoFit() {
+                return imgAutoFit;
+            }
+        },
+        {
+            key: "setSaveImgTitle",
+            value: function setSaveImgTitle(title) {
+                saveImgTitle = title;
+            }
+        },
+        {
+            key: "getSaveImgTitle",
+            value: function getSaveImgTitle() {
+                return saveImgTitle;
+            }
+        },
+        {
+            key: "setDestroyContainerState",
+            value: function setDestroyContainerState(state) {
+                destroyContainer = state;
+            }
+        },
+        {
+            key: "getDestroyContainerState",
+            value: function getDestroyContainerState() {
+                return destroyContainer;
+            }
+        }
+    ]);
+    return PlugInParameters;
+}();
+export { PlugInParameters as default };

package/esm/customerService/js-screen-shot/lib/split-methods/AddHistoryData.d.ts

@@ -0,0 +1 @@
+export declare function addHistory(): void;

package/esm/customerService/js-screen-shot/lib/split-methods/AddHistoryData.js

@@ -0,0 +1,23 @@
+import InitData from "../main-entrance/InitData";
+import PlugInParameters from "../main-entrance/PlugInParameters";
+// 保存当前画布状态
+export function addHistory() {
+    var data = new InitData();
+    var plugInParameters = new PlugInParameters();
+    var screenShotController = data.getScreenShotContainer();
+    if (screenShotController == null) return;
+    // 获取canvas容器
+    // 获取canvas画布与容器
+    var context = screenShotController.getContext("2d");
+    var controller = screenShotController;
+    if (data.getHistory().length > plugInParameters.getMaxUndoNum()) {
+        // 删除最早的一条画布记录
+        data.shiftHistory();
+    }
+    // 保存当前画布状态
+    data.pushHistory({
+        data: context.getImageData(0, 0, controller.width, controller.height)
+    });
+    // 启用撤销按钮
+    data.setUndoStatus(true);
+}

package/esm/customerService/js-screen-shot/lib/split-methods/BoundaryJudgment.d.ts

@@ -0,0 +1,8 @@
+import { positionInfoType } from "../type/ComponentType";
+/**
+ * 获取工具栏工具边界绘制状态
+ * @param startX x轴绘制起点
+ * @param startY y轴绘制起点
+ * @param cutBoxPosition 裁剪框位置信息
+ */
+export declare function getDrawBoundaryStatus(startX: number, startY: number, cutBoxPosition: positionInfoType): boolean;

package/esm/customerService/js-screen-shot/lib/split-methods/BoundaryJudgment.js

@@ -0,0 +1,13 @@
+/**
+ * 获取工具栏工具边界绘制状态
+ * @param startX x轴绘制起点
+ * @param startY y轴绘制起点
+ * @param cutBoxPosition 裁剪框位置信息
+ */ export function getDrawBoundaryStatus(startX, startY, cutBoxPosition) {
+    if (startX < cutBoxPosition.startX || startY < cutBoxPosition.startY || startX > cutBoxPosition.startX + cutBoxPosition.width || startY > cutBoxPosition.startY + cutBoxPosition.height) {
+        // 无法绘制
+        return false;
+    }
+    // 可以绘制
+    return true;
+}

package/esm/customerService/js-screen-shot/lib/split-methods/CalculateOptionIcoPosition.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 计算截图工具栏画笔选项三角形角标位置
+ * @param index
+ */
+export declare function calculateOptionIcoPosition(index: number): number;

package/esm/customerService/js-screen-shot/lib/split-methods/CalculateOptionIcoPosition.js

@@ -0,0 +1,21 @@
+/**
+ * 计算截图工具栏画笔选项三角形角标位置
+ * @param index
+ */ export function calculateOptionIcoPosition(index) {
+    switch(index){
+        case 1:
+            return 24 - 8;
+        case 2:
+            return 24 * 2 + 8;
+        case 3:
+            return 24 * 4 - 6;
+        case 4:
+            return 24 * 5 + 8;
+        case 5:
+            return 24 * 7 + 6;
+        case 6:
+            return 24 * 9 - 6;
+        default:
+            return 0;
+    }
+}

package/esm/customerService/js-screen-shot/lib/split-methods/CalculateToolLocation.d.ts

@@ -0,0 +1,16 @@
+import { positionInfoType, toolPositionValType } from "../type/ComponentType";
+/**
+ * 计算截图工具栏位置
+ * @param position 裁剪框位置信息
+ * @param toolWidth 截图工具栏宽度
+ * @param containerWidth 截图容器宽度
+ * @param placement 展示位置
+ * @param containerLocation 截图容器位置信息
+ */
+export declare function calculateToolLocation(position: positionInfoType, toolWidth: number, containerWidth: number, placement: toolPositionValType, containerLocation: {
+    top: number;
+    left: number;
+}): {
+    mouseX: number;
+    mouseY: number;
+};

package/esm/customerService/js-screen-shot/lib/split-methods/CalculateToolLocation.js

@@ -0,0 +1,39 @@
+/**
+ * 计算截图工具栏位置
+ * @param position 裁剪框位置信息
+ * @param toolWidth 截图工具栏宽度
+ * @param containerWidth 截图容器宽度
+ * @param placement 展示位置
+ * @param containerLocation 截图容器位置信息
+ */ export function calculateToolLocation(position, toolWidth, containerWidth, placement, containerLocation) {
+    // 工具栏X轴坐标 = (裁剪框的宽度 - 工具栏的宽度) / 2 + (裁剪框距离左侧的距离 - 容器距离左侧的距离)
+    var mouseX = (position.width - toolWidth) / 2 + (position.startX - containerLocation.left);
+    // 左对齐
+    if (placement === "left") {
+        mouseX = position.startX;
+    }
+    // 右对齐
+    if (placement === "right") {
+        mouseX = position.startX + position.width - toolWidth;
+    }
+    // 工具栏超出画布左侧可视区域，进行位置修正
+    if (mouseX < 0) mouseX = 0;
+    // 计算工具栏在画布内的占用面积
+    var toolSize = mouseX + toolWidth;
+    // 工具栏超出画布右侧可视区域，进行位置修正
+    if (toolSize > containerWidth) {
+        mouseX = containerWidth - toolWidth;
+    }
+    // 工具栏Y轴坐标
+    var mouseY = position.startY + position.height + 10;
+    if (position.width < 0 && position.height < 0 || position.width > 0 && position.height < 0) {
+        // 从右下角或者左下角拖动时，工具条y轴的位置应该为position.startY + 10
+        mouseY = position.startY + 10;
+    }
+    // 需要减去容器本身距离顶部的距离
+    mouseY -= containerLocation.top;
+    return {
+        mouseX: mouseX,
+        mouseY: mouseY
+    };
+}

package/esm/customerService/js-screen-shot/lib/split-methods/DrawArrow.d.ts

@@ -0,0 +1,31 @@
+export declare class DrawArrow {
+    private beginPoint;
+    private stopPoint;
+    private polygonVertex;
+    private angle;
+    private arrowInfo;
+    private size;
+    /**
+     * 绘制箭头
+     * @param ctx 需要进行绘制的画布
+     * @param originX 鼠标按下时的x轴坐标
+     * @param originY 鼠标按下式的y轴坐标
+     * @param x 当前鼠标x轴坐标
+     * @param y 当前鼠标y轴坐标
+     * @param color 箭头颜色
+     * @param size 箭头尺寸
+     */
+    draw(ctx: CanvasRenderingContext2D, originX: number, originY: number, x: number, y: number, color: string, size: number): void;
+    private arrowCord;
+    private getRadian;
+    private sideCord;
+    /**
+     * 设置箭头的相关绘制信息
+     * @param edgeLen 长度
+     * @param angle 角度
+     * @private
+     */
+    private setArrowInfo;
+    private dynArrowSize;
+    private drawArrow;
+}

package/esm/customerService/js-screen-shot/lib/split-methods/DrawArrow.js

@@ -0,0 +1,159 @@
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+export var DrawArrow = /*#__PURE__*/ function() {
+    "use strict";
+    function DrawArrow() {
+        _class_call_check(this, DrawArrow);
+        // 起始点与结束点
+        _define_property(this, "beginPoint", {
+            x: 0,
+            y: 0
+        });
+        _define_property(this, "stopPoint", {
+            x: 0,
+            y: 0
+        });
+        // 多边形的尺寸信息
+        _define_property(this, "polygonVertex", []);
+        // 起点与X轴之间的夹角角度值
+        _define_property(this, "angle", 0);
+        // 箭头信息
+        _define_property(this, "arrowInfo", {
+            edgeLen: 50,
+            angle: 30 // 箭头的头部角度
+        });
+        _define_property(this, "size", 1);
+    }
+    _create_class(DrawArrow, [
+        {
+            key: "draw",
+            value: /**
+   * 绘制箭头
+   * @param ctx 需要进行绘制的画布
+   * @param originX 鼠标按下时的x轴坐标
+   * @param originY 鼠标按下式的y轴坐标
+   * @param x 当前鼠标x轴坐标
+   * @param y 当前鼠标y轴坐标
+   * @param color 箭头颜色
+   * @param size 箭头尺寸
+   */ function draw(ctx, originX, originY, x, y, color, size) {
+                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);
+                switch(size){
+                    case 2:
+                        this.size = 1;
+                        break;
+                    case 5:
+                        this.size = 1.3;
+                        break;
+                    case 10:
+                        this.size = 1.7;
+                        break;
+                    default:
+                        this.size = 1;
+                        break;
+                }
+            }
+        },
+        {
+            key: "arrowCord",
+            value: // 计算箭头底边两个点位置信息
+            function 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);
+                // 使用三角函数计算出8、9顶点的坐标
+                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));
+                // 使用三角函数计算出4、5顶点的坐标
+                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));
+            }
+        },
+        {
+            key: "getRadian",
+            value: // 计算两个点之间的夹角
+            function getRadian(beginPoint, stopPoint) {
+                // 使用atan2算出夹角（弧度），并将其转换为角度值(弧度 / 180)
+                this.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
+                this.setArrowInfo(50 * this.size, 30 * this.size);
+                this.dynArrowSize();
+            }
+        },
+        {
+            key: "sideCord",
+            value: // 计算另两个底边侧面点
+            function sideCord() {
+                var midpoint = {
+                    x: 0,
+                    y: 0
+                };
+                midpoint.x = (this.polygonVertex[4] + this.polygonVertex[8]) / 2;
+                // 通过求出第5个顶点和第9个顶点的横纵坐标的平均值，得到多边形的中心点坐标，
+                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;
+            }
+        },
+        {
+            key: "setArrowInfo",
+            value: /**
+   * 设置箭头的相关绘制信息
+   * @param edgeLen 长度
+   * @param angle 角度
+   * @private
+   */ function setArrowInfo(edgeLen, angle) {
+                this.arrowInfo.edgeLen = edgeLen;
+                this.arrowInfo.angle = angle;
+            }
+        },
+        {
+            key: "dynArrowSize",
+            value: // 计算箭头尺寸
+            function dynArrowSize() {
+                var x = this.stopPoint.x - this.beginPoint.x;
+                var y = this.stopPoint.y - this.beginPoint.y;
+                // 计算两点之间的直线距离
+                var length = Math.sqrt(Math.pow(x, 2) + Math.pow(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;
+                }
+            }
+        },
+        {
+            key: "drawArrow",
+            value: // 在画布上画出递增变粗的箭头
+            function 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();
+            }
+        }
+    ]);
+    return DrawArrow;
+}();

package/esm/customerService/js-screen-shot/lib/split-methods/DrawCircle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 绘制圆形
+ * @param context 需要进行绘制的画布
+ * @param mouseX 当前鼠标x轴坐标
+ * @param mouseY 当前鼠标y轴坐标
+ * @param mouseStartX 鼠标按下时的x轴坐标
+ * @param mouseStartY 鼠标按下时的y轴坐标
+ * @param borderWidth 边框宽度
+ * @param color 边框颜色
+ */
+export declare function drawCircle(context: CanvasRenderingContext2D, mouseX: number, mouseY: number, mouseStartX: number, mouseStartY: number, borderWidth: number, color: string): void;

package/esm/customerService/js-screen-shot/lib/split-methods/DrawCircle.js

@@ -0,0 +1,37 @@
+/**
+ * 绘制圆形
+ * @param context 需要进行绘制的画布
+ * @param mouseX 当前鼠标x轴坐标
+ * @param mouseY 当前鼠标y轴坐标
+ * @param mouseStartX 鼠标按下时的x轴坐标
+ * @param mouseStartY 鼠标按下时的y轴坐标
+ * @param borderWidth 边框宽度
+ * @param color 边框颜色
+ */ export function drawCircle(context, mouseX, mouseY, mouseStartX, mouseStartY, borderWidth, color) {
+    // 坐标边界处理，解决反向绘制椭圆时的报错问题
+    var startX = mouseX < mouseStartX ? mouseX : mouseStartX;
+    var startY = mouseY < mouseStartY ? mouseY : mouseStartY;
+    var endX = mouseX >= mouseStartX ? mouseX : mouseStartX;
+    var endY = mouseY >= mouseStartY ? mouseY : mouseStartY;
+    // 计算圆的半径
+    var radiusX = (endX - startX) * 0.5;
+    var radiusY = (endY - startY) * 0.5;
+    // 计算圆心的x、y坐标
+    var centerX = startX + radiusX;
+    var centerY = startY + radiusY;
+    // 开始绘制
+    context.save();
+    context.beginPath();
+    context.lineWidth = borderWidth;
+    context.strokeStyle = color;
+    if (typeof context.ellipse === "function") {
+        // 绘制圆，旋转角度与起始角度都为0，结束角度为2*PI
+        context.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+    } else {
+        throw "你的浏览器不支持ellipse，无法绘制椭圆";
+    }
+    context.stroke();
+    context.closePath();
+    // 结束绘制
+    context.restore();
+}