hy-app 0.2.13 → 0.2.15

package/components/hy-signature/hy-signature.vue

@@ -1,9 +1,6 @@
 <template>
-  <view class="hy-signature" :style="customStyle">
-    <view
-      class="hy-signature__content"
-      :style="{ borderRadius: addUnit(round) }"
-    >
+  <view :class="['hy-signature', customClass]" :style="customStyle">
+    <view class="hy-signature__content" :style="{ borderRadius: addUnit(round) }">
       <!-- #ifdef MP-WEIXIN -->
       <canvas
         class="hy-signature__content-canvas"
@@ -54,8 +51,7 @@
             @click="revoke"
             :disabled="lines.length <= 0"
             :text="revokeText"
-          >
-          </hy-button>
+          ></hy-button>
           <hy-button
             size="small"
             plain
@@ -65,13 +61,7 @@
             :text="restoreText"
           ></hy-button>
         </block>
-        <hy-button
-          size="small"
-          plain
-          shape="circle"
-          @click="clear"
-          :text="clearText"
-        ></hy-button>
+        <hy-button size="small" plain shape="circle" @click="clear" :text="clearText"></hy-button>
         <hy-button
           size="small"
           shape="circle"
@@ -83,98 +73,206 @@
   </view>
 </template>
 <script lang="ts">
+/**
+ * 用于签名场景，基于 Canvas 实现的签名组件。提供了基础签名、历史记录、笔锋效果等功能。
+ * @displayName hy-signature
+ */
+defineOptions({})
 export default {
-  name: "hy-signature",
+  name: 'hy-signature',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 <script lang="ts" setup>
-import {
-  computed,
-  getCurrentInstance,
-  onBeforeMount,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-  type CSSProperties,
-} from "vue";
-import { addUnit, getRect, guid } from "../../utils";
-import type { SignatureExpose, SignatureResult, Point, Line } from "./typing";
-import type IProps from "./typing";
-import defaultProps from "./props";
+import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { addUnit, getRect, guid } from '../../utils'
+import type { SignatureExpose, SignatureResult, Point, Line, ISignatureEmits } from './typing'
 // #ifdef MP-WEIXIN
-import { canvas2dAdapter } from "./canvasHelper";
+import { canvas2dAdapter } from './canvasHelper'
 // #endif
 
 // 组件
-import HyButton from "@/package/components/hy-button/hy-button.vue";
-
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const emit = defineEmits(["start", "end", "signing", "confirm", "clear"]);
-const instance = getCurrentInstance() as any;
-const canvasId = ref<string>(`signature${guid()}`); // canvas 组件的唯一标识符
-let canvas: null = null; //canvas对象 微信小程序生成图片必须传入
-const drawing = ref<boolean>(false); // 是否正在绘制
-const pixelRatio = ref<number>(1); // 像素比
+import HyButton from '../hy-button/hy-button.vue'
+
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 签名笔颜色 */
+  penColor: {
+    type: String,
+    default: '#000',
+  },
+  /** 签名笔宽度 */
+  lineWidth: {
+    type: Number,
+    default: 3,
+  },
+  /** 清空按钮的文本 */
+  clearText: {
+    type: String,
+    default: '清空',
+  },
+  /** 撤回按钮的文本 */
+  revokeText: {
+    type: String,
+    default: '撤销',
+  },
+  /** 恢复按钮的文本 */
+  restoreText: {
+    type: String,
+    default: '恢复',
+  },
+  /** 确认按钮的文本 */
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  /** 目标文件的类型 */
+  fileType: {
+    type: String,
+    default: 'png',
+  },
+  /** 签名笔颜色 */
+  quality: {
+    type: Number,
+    default: 1,
+  },
+  /** 目标文件的质量 */
+  exportScale: {
+    type: Number,
+    default: 1,
+  },
+  /** 是否禁用签名板 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 画布的高度 */
+  height: {
+    type: Number,
+    default: 1,
+  },
+  /** 画布的宽度 */
+  width: {
+    type: Number,
+    default: 1,
+  },
+  /** 边框圆角 */
+  round: {
+    type: String,
+    default: '10rpx',
+  },
+  /** 画板的背景色 */
+  backgroundColor: String,
+  /** 是否禁用画布滚动 */
+  disableScroll: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启历史记录 */
+  enableHistory: {
+    type: Boolean,
+    default: false,
+  },
+  /** 撤回和恢复的步长 */
+  step: {
+    type: Number,
+    default: 1,
+  },
+  /** 撤回按钮的文本 */
+  undoText: String,
+  /** 恢复按钮的文本 */
+  redoText: String,
+  /** 是否启用压感模式 */
+  pressure: {
+    type: Boolean,
+    default: false,
+  },
+  /** 压感模式下笔画最小宽度 */
+  minWidth: {
+    type: Number,
+    default: 2,
+  },
+  /** 压感模式下笔画最大宽度 */
+  maxWidth: {
+    type: Number,
+    default: 6,
+  },
+  /** 最小速度阈值，影响压感模式下的笔画宽度变化 */
+  minSpeed: {
+    type: Number,
+    default: 1.5,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const emit = defineEmits<ISignatureEmits>()
+const instance = getCurrentInstance() as any
+const canvasId = ref<string>(`signature${guid()}`) // canvas 组件的唯一标识符
+let canvas: null = null //canvas对象 微信小程序生成图片必须传入
+const drawing = ref<boolean>(false) // 是否正在绘制
+const pixelRatio = ref<number>(1) // 像素比
 
 const canvasState = reactive({
   canvasWidth: 0,
   canvasHeight: 0,
   ctx: null as UniApp.CanvasContext | null, // canvas上下文
-});
+})
 
 watch(
   () => props.penColor,
   () => {
-    setLine();
+    setLine()
   },
-);
+)
 
 watch(
   () => props.lineWidth,
   () => {
-    setLine();
+    setLine()
   },
-);
+)
 
 const canvasStyle = computed(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
   if (props.width) {
-    style.width = addUnit(props.width);
+    style.width = addUnit(props.width)
   }
 
   if (props.height) {
-    style.height = addUnit(props.height);
+    style.height = addUnit(props.height)
   }
 
-  return `${style}`;
-});
+  return `${style}`
+})
 
-const disableScroll = computed(() => props.disableScroll);
-const enableHistory = computed(() => props.enableHistory);
+const disableScroll = computed(() => props.disableScroll)
+const enableHistory = computed(() => props.enableHistory)
 
-const lines = ref<Line[]>([]); // 保存所有线条
-const redoLines = ref<Line[]>([]); // 保存撤销的线条
-const currentLine = ref<Line>(); // 当前正在绘制的线
-const currentStep = ref(0); // 当前步骤
+const lines = ref<Line[]>([]) // 保存所有线条
+const redoLines = ref<Line[]>([]) // 保存撤销的线条
+const currentLine = ref<Line>() // 当前正在绘制的线
+const currentStep = ref(0) // 当前步骤
 
 /**
  * @description 添加计算笔画宽度的方法
  * */
 function calculateLineWidth(speed: number): number {
-  if (!props.pressure) return props.lineWidth;
-
-  const minSpeed = props.minSpeed || 1.5;
-  const limitedSpeed = Math.min(minSpeed * 10, Math.max(minSpeed, speed));
-  const addWidth =
-    ((props.maxWidth - props.minWidth) * (limitedSpeed - minSpeed)) / minSpeed;
-  const lineWidth = Math.max(props.maxWidth - addWidth, props.minWidth);
-  return Math.min(lineWidth, props.maxWidth);
+  if (!props.pressure) return props.lineWidth
+
+  const minSpeed = props.minSpeed || 1.5
+  const limitedSpeed = Math.min(minSpeed * 10, Math.max(minSpeed, speed))
+  const addWidth = ((props.maxWidth - props.minWidth) * (limitedSpeed - minSpeed)) / minSpeed
+  const lineWidth = Math.max(props.maxWidth - addWidth, props.minWidth)
+  return Math.min(lineWidth, props.maxWidth)
 }
 
 /**
@@ -183,22 +281,22 @@ function calculateLineWidth(speed: number): number {
 const getDefaultLineWidth = () => {
   if (props.pressure) {
     // 在压感模式下，使用最大和最小宽度的平均值作为默认值
-    return (props.maxWidth + props.minWidth) / 2;
+    return (props.maxWidth + props.minWidth) / 2
   }
-  return props.lineWidth;
-};
+  return props.lineWidth
+}
 
 /**
  * @description 开始画线
  * */
 const startDrawing = (e: any) => {
-  e.preventDefault();
-  drawing.value = true;
-  setLine();
-  emit("start", e);
+  e.preventDefault()
+  drawing.value = true
+  setLine()
+  emit('start', e)
 
   // 创建新线条，同时保存当前的所有绘制参数
-  const { x, y } = e.touches[0];
+  const { x, y } = e.touches[0]
   currentLine.value = {
     points: [
       {
@@ -211,19 +309,19 @@ const startDrawing = (e: any) => {
     width: getDefaultLineWidth(),
     backgroundColor: props.backgroundColor,
     isPressure: props.pressure, // 添加笔锋模式标记
-  };
+  }
 
   // 清空重做记录
-  redoLines.value = [];
-  draw(e);
-};
+  redoLines.value = []
+  draw(e)
+}
 
 /**
  * @description 结束画线
  * */
 const stopDrawing = (e: TouchEvent) => {
-  e.preventDefault();
-  drawing.value = false;
+  e.preventDefault()
+  drawing.value = false
   if (currentLine.value) {
     // 保存完整的线条信息，包括所有点的参数
     lines.value.push({
@@ -240,14 +338,14 @@ const stopDrawing = (e: TouchEvent) => {
         lastY2: point.lastY2,
         isFirstPoint: point.isFirstPoint,
       })),
-    });
-    currentStep.value = lines.value.length;
+    })
+    currentStep.value = lines.value.length
   }
-  currentLine.value = undefined;
-  const { ctx } = canvasState;
-  if (ctx) ctx.beginPath();
-  emit("end", e);
-};
+  currentLine.value = undefined
+  const { ctx } = canvasState
+  if (ctx) ctx.beginPath()
+  emit('end', e)
+}
 
 /**
  * @description 初始化 canvas
@@ -256,336 +354,320 @@ const stopDrawing = (e: TouchEvent) => {
 const initCanvas = (forceUpdate: boolean = false) => {
   // 如果不是强制更新，且已经初始化过 canvas，则不再重复初始化
   if (!forceUpdate && canvasState.canvasHeight && canvasState.canvasWidth) {
-    return;
+    return
   }
   getContext().then(() => {
-    const { ctx } = canvasState;
+    const { ctx } = canvasState
     if (ctx && props.backgroundColor) {
-      ctx.setFillStyle(props.backgroundColor);
-      ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight);
-      ctx.draw();
+      ctx.setFillStyle(props.backgroundColor)
+      ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+      ctx.draw()
     }
-  });
-};
+  })
+}
 
 /**
  * @description 清空 canvas
  * */
 const clear = () => {
-  lines.value = [];
-  redoLines.value = [];
-  currentStep.value = 0;
-  clearCanvas();
-  emit("clear");
-};
+  lines.value = []
+  redoLines.value = []
+  currentStep.value = 0
+  clearCanvas()
+  emit('clear')
+}
 
 // 确认签名
 const confirmSignature = () => {
-  canvasToImage();
-};
+  canvasToImage()
+}
 
 /**
  * @description canvas划线
  * */
 const draw = (e: any) => {
-  e.preventDefault();
-  const { ctx } = canvasState;
+  e.preventDefault()
+  const { ctx } = canvasState
 
-  if (!drawing.value || props.disabled || !ctx) return;
-  const { x, y } = e.touches[0];
+  if (!drawing.value || props.disabled || !ctx) return
+  const { x, y } = e.touches[0]
 
   const point: Point = {
     x,
     y,
     t: Date.now(),
-  };
+  }
 
   if (currentLine.value) {
-    const points = currentLine.value.points;
-    const prePoint = points[points.length - 1];
+    const points = currentLine.value.points
+    const prePoint = points[points.length - 1]
 
     if (prePoint.t === point.t || (prePoint.x === x && prePoint.y === y)) {
-      return;
+      return
     }
 
     // 计算点的速度和距离
     point.distance = Math.sqrt(
       Math.pow(point.x - prePoint.x, 2) + Math.pow(point.y - prePoint.y, 2),
-    );
-    point.speed = point.distance / (point.t - prePoint.t || 0.1);
+    )
+    point.speed = point.distance / (point.t - prePoint.t || 0.1)
 
     if (props.pressure) {
-      point.lineWidth = calculateLineWidth(point.speed);
+      point.lineWidth = calculateLineWidth(point.speed)
       // 处理线宽变化率限制
       if (points.length >= 2) {
-        const prePoint2 = points[points.length - 2];
+        const prePoint2 = points[points.length - 2]
         if (prePoint2.lineWidth && prePoint.lineWidth) {
-          const rate =
-            (point.lineWidth - prePoint.lineWidth) / prePoint.lineWidth;
-          const maxRate = 0.2; // 最大变化率20%
+          const rate = (point.lineWidth - prePoint.lineWidth) / prePoint.lineWidth
+          const maxRate = 0.2 // 最大变化率20%
           if (Math.abs(rate) > maxRate) {
-            const per = rate > 0 ? maxRate : -maxRate;
-            point.lineWidth = prePoint.lineWidth * (1 + per);
+            const per = rate > 0 ? maxRate : -maxRate
+            point.lineWidth = prePoint.lineWidth * (1 + per)
           }
         }
       }
     }
 
-    points.push(point);
+    points.push(point)
 
     // 非笔锋模式直接使用线段连接
     if (!props.pressure) {
-      ctx.beginPath();
-      ctx.moveTo(prePoint.x, prePoint.y);
-      ctx.lineTo(point.x, point.y);
-      ctx.stroke();
-      ctx.draw(true);
+      ctx.beginPath()
+      ctx.moveTo(prePoint.x, prePoint.y)
+      ctx.lineTo(point.x, point.y)
+      ctx.stroke()
+      ctx.draw(true)
     } else if (points.length >= 2) {
       // 笔锋模式使用贝塞尔曲线
-      drawSmoothLine(prePoint, point);
+      drawSmoothLine(prePoint, point)
     }
   }
 
-  emit("signing", e);
-};
+  emit('signing', e)
+}
 
 /**
  * @description 重绘整个画布
  * */
 const redrawCanvas = () => {
-  const { ctx } = canvasState;
-  if (!ctx) return;
+  const { ctx } = canvasState
+  if (!ctx) return
 
   // 清除画布并设置背景
   if (props.backgroundColor) {
-    ctx.setFillStyle(props.backgroundColor);
-    ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight);
+    ctx.setFillStyle(props.backgroundColor)
+    ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
   } else {
-    ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight);
+    ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
   }
 
   // 如果没有线条，只需要清空画布
   if (lines.value.length === 0) {
-    ctx.draw();
-    return;
+    ctx.draw()
+    return
   }
 
   // 收集所有绘制操作，最后一次性 draw
   lines.value.forEach((line) => {
-    if (!line.points.length) return;
+    if (!line.points.length) return
 
-    ctx.setStrokeStyle(line.color);
-    ctx.setLineJoin("round");
-    ctx.setLineCap("round");
+    ctx.setStrokeStyle(line.color)
+    ctx.setLineJoin('round')
+    ctx.setLineCap('round')
 
     if (line.isPressure && props.pressure) {
       // 笔锋模式的重绘
       line.points.forEach((point, index) => {
-        if (index === 0) return;
-        const prePoint = line.points[index - 1];
-        const dis_x = point.x - prePoint.x;
-        const dis_y = point.y - prePoint.y;
-        const distance = Math.sqrt(dis_x * dis_x + dis_y * dis_y);
+        if (index === 0) return
+        const prePoint = line.points[index - 1]
+        const dis_x = point.x - prePoint.x
+        const dis_y = point.y - prePoint.y
+        const distance = Math.sqrt(dis_x * dis_x + dis_y * dis_y)
 
         if (distance <= 2) {
-          point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5;
-          point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5;
+          point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5
+          point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5
         } else {
-          const speed = point.speed || 0;
-          const minSpeed = props.minSpeed || 1.5;
-          const speedFactor = Math.max(
-            0.1,
-            Math.min(0.9, speed / (minSpeed * 10)),
-          );
-
-          point.lastX1 = prePoint.x + dis_x * (0.2 + speedFactor * 0.3);
-          point.lastY1 = prePoint.y + dis_y * (0.2 + speedFactor * 0.3);
-          point.lastX2 = prePoint.x + dis_x * (0.8 - speedFactor * 0.3);
-          point.lastY2 = prePoint.y + dis_y * (0.8 - speedFactor * 0.3);
+          const speed = point.speed || 0
+          const minSpeed = props.minSpeed || 1.5
+          const speedFactor = Math.max(0.1, Math.min(0.9, speed / (minSpeed * 10)))
+
+          point.lastX1 = prePoint.x + dis_x * (0.2 + speedFactor * 0.3)
+          point.lastY1 = prePoint.y + dis_y * (0.2 + speedFactor * 0.3)
+          point.lastX2 = prePoint.x + dis_x * (0.8 - speedFactor * 0.3)
+          point.lastY2 = prePoint.y + dis_y * (0.8 - speedFactor * 0.3)
         }
 
-        const lineWidth = point.lineWidth || line.width;
-        point.isFirstPoint = true;
-      });
+        const lineWidth = point.lineWidth || line.width
+        point.isFirstPoint = true
+      })
     } else {
       // 非笔锋模式的重绘
-      ctx.setLineWidth(line.width);
+      ctx.setLineWidth(line.width)
       line.points.forEach((point, index) => {
-        if (index === 0) return;
-        const prePoint = line.points[index - 1];
-        ctx.beginPath();
-        ctx.moveTo(prePoint.x, prePoint.y);
-        ctx.lineTo(point.x, point.y);
-        ctx.stroke();
-      });
+        if (index === 0) return
+        const prePoint = line.points[index - 1]
+        ctx.beginPath()
+        ctx.moveTo(prePoint.x, prePoint.y)
+        ctx.lineTo(point.x, point.y)
+        ctx.stroke()
+      })
     }
-  });
+  })
 
   // 所有线条绘制完成后，一次性更新画布
-  ctx.draw();
-};
+  ctx.draw()
+}
 
 /**
  * @description 修改撤销功能
  * */
 const revoke = () => {
-  if (!lines.value.length) return;
-  const step = Math.min(props.step, lines.value.length);
-  const removedLines = lines.value.splice(lines.value.length - step);
-  redoLines.value.push(...removedLines);
-  currentStep.value = Math.max(0, currentStep.value - step);
-  redrawCanvas();
-};
+  if (!lines.value.length) return
+  const step = Math.min(props.step, lines.value.length)
+  const removedLines = lines.value.splice(lines.value.length - step)
+  redoLines.value.push(...removedLines)
+  currentStep.value = Math.max(0, currentStep.value - step)
+  redrawCanvas()
+}
 
 /**
  * @description 修改恢复功能
  * */
 const restore = () => {
-  if (!redoLines.value.length) return;
-  const step = Math.min(props.step, redoLines.value.length);
-  const restoredLines = redoLines.value.splice(redoLines.value.length - step);
-  lines.value.push(...restoredLines);
-  currentStep.value = Math.min(lines.value.length, currentStep.value + step);
-  redrawCanvas();
-};
+  if (!redoLines.value.length) return
+  const step = Math.min(props.step, redoLines.value.length)
+  const restoredLines = redoLines.value.splice(redoLines.value.length - step)
+  lines.value.push(...restoredLines)
+  currentStep.value = Math.min(lines.value.length, currentStep.value + step)
+  redrawCanvas()
+}
 
 /**
  * @description 添加平滑线条绘制方法
  * */
 function drawSmoothLine(prePoint: Point, point: Point) {
-  const { ctx } = canvasState;
-  if (!ctx) return;
+  const { ctx } = canvasState
+  if (!ctx) return
 
   // 计算两点间距离
-  const dis_x = point.x - prePoint.x;
-  const dis_y = point.y - prePoint.y;
-  const distance = Math.sqrt(dis_x * dis_x + dis_y * dis_y);
+  const dis_x = point.x - prePoint.x
+  const dis_y = point.y - prePoint.y
+  const distance = Math.sqrt(dis_x * dis_x + dis_y * dis_y)
 
   if (distance <= 2) {
     // 对于非常近的点，直接使用中点
-    point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5;
-    point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5;
+    point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5
+    point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5
   } else {
     // 根据点的速度计算控制点的偏移程度
-    const speed = point.speed || 0;
-    const minSpeed = props.minSpeed || 1.5;
-    const speedFactor = Math.max(0.1, Math.min(0.9, speed / (minSpeed * 10)));
+    const speed = point.speed || 0
+    const minSpeed = props.minSpeed || 1.5
+    const speedFactor = Math.max(0.1, Math.min(0.9, speed / (minSpeed * 10)))
 
     // 计算控制点
-    point.lastX1 = prePoint.x + dis_x * (0.2 + speedFactor * 0.3);
-    point.lastY1 = prePoint.y + dis_y * (0.2 + speedFactor * 0.3);
-    point.lastX2 = prePoint.x + dis_x * (0.8 - speedFactor * 0.3);
-    point.lastY2 = prePoint.y + dis_y * (0.8 - speedFactor * 0.3);
+    point.lastX1 = prePoint.x + dis_x * (0.2 + speedFactor * 0.3)
+    point.lastY1 = prePoint.y + dis_y * (0.2 + speedFactor * 0.3)
+    point.lastX2 = prePoint.x + dis_x * (0.8 - speedFactor * 0.3)
+    point.lastY2 = prePoint.y + dis_y * (0.8 - speedFactor * 0.3)
   }
 
   // 计算线宽
-  const lineWidth = point.lineWidth || props.lineWidth;
+  const lineWidth = point.lineWidth || props.lineWidth
 
   // 绘制贝塞尔曲线
-  if (typeof prePoint.lastX1 === "number") {
+  if (typeof prePoint.lastX1 === 'number') {
     // 设置线宽
-    ctx.setLineWidth(lineWidth);
+    ctx.setLineWidth(lineWidth)
     // 绘制第一段曲线
-    ctx.beginPath();
-    ctx.moveTo(prePoint.lastX2!, prePoint.lastY2!);
-    ctx.quadraticCurveTo(prePoint.x, prePoint.y, point.lastX1, point.lastY1);
-    ctx.stroke();
+    ctx.beginPath()
+    ctx.moveTo(prePoint.lastX2!, prePoint.lastY2!)
+    ctx.quadraticCurveTo(prePoint.x, prePoint.y, point.lastX1, point.lastY1)
+    ctx.stroke()
 
     if (!prePoint.isFirstPoint) {
       // 绘制连接段曲线
-      ctx.beginPath();
-      ctx.moveTo(prePoint.lastX1!, prePoint.lastY1!);
-      ctx.quadraticCurveTo(
-        prePoint.x,
-        prePoint.y,
-        prePoint.lastX2!,
-        prePoint.lastY2!,
-      );
-      ctx.stroke();
+      ctx.beginPath()
+      ctx.moveTo(prePoint.lastX1!, prePoint.lastY1!)
+      ctx.quadraticCurveTo(prePoint.x, prePoint.y, prePoint.lastX2!, prePoint.lastY2!)
+      ctx.stroke()
     }
 
     // 批量更新绘制内容
-    ctx.draw(true);
+    ctx.draw(true)
   } else {
-    point.isFirstPoint = true;
+    point.isFirstPoint = true
   }
 }
 
 onMounted(() => {
-  initCanvas();
-});
+  initCanvas()
+})
 
 onBeforeMount(() => {
   // #ifdef MP
-  pixelRatio.value = uni.getSystemInfoSync().pixelRatio;
+  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
   // #endif
-});
+})
 
 /**
  * @description 获取canvas上下文
  */
 function getContext() {
   return new Promise<UniApp.CanvasContext>((resolve) => {
-    const { ctx } = canvasState;
+    const { ctx } = canvasState
 
     if (ctx) {
-      return resolve(ctx);
+      return resolve(ctx)
     }
     // #ifndef MP-WEIXIN
     getRect(`#${canvasId.value}`, false, instance).then((canvasRect) => {
-      setCanvasState(canvasRect.width!, canvasRect.height!);
-      canvasState.ctx = uni.createCanvasContext(canvasId.value, instance.proxy);
+      setCanvasState(canvasRect.width!, canvasRect.height!)
+      canvasState.ctx = uni.createCanvasContext(canvasId.value, instance.proxy)
       if (canvasState.ctx) {
-        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value);
+        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
       }
-      resolve(canvasState.ctx);
-    });
+      resolve(canvasState.ctx)
+    })
     // #endif
     // #ifdef MP-WEIXIN
 
-    getRect(`#${canvasId.value}`, false, instance, true).then(
-      (canvasRect: any) => {
-        if (
-          canvasRect &&
-          canvasRect.node &&
-          canvasRect.width &&
-          canvasRect.height
-        ) {
-          const canvasInstance = canvasRect.node;
-          canvasState.ctx = canvas2dAdapter(
-            canvasInstance.getContext("2d") as CanvasRenderingContext2D,
-          );
-          canvasInstance.width = canvasRect.width * pixelRatio.value;
-          canvasInstance.height = canvasRect.height * pixelRatio.value;
-          canvasState.ctx.scale(pixelRatio.value, pixelRatio.value);
-          canvas = canvasInstance;
-          setCanvasState(canvasRect.width, canvasRect.height);
-          resolve(canvasState.ctx);
-        }
-      },
-    );
+    getRect(`#${canvasId.value}`, false, instance, true).then((canvasRect: any) => {
+      if (canvasRect && canvasRect.node && canvasRect.width && canvasRect.height) {
+        const canvasInstance = canvasRect.node
+        canvasState.ctx = canvas2dAdapter(
+          canvasInstance.getContext('2d') as CanvasRenderingContext2D,
+        )
+        canvasInstance.width = canvasRect.width * pixelRatio.value
+        canvasInstance.height = canvasRect.height * pixelRatio.value
+        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
+        canvas = canvasInstance
+        setCanvasState(canvasRect.width, canvasRect.height)
+        resolve(canvasState.ctx)
+      }
+    })
     // #endif
-  });
+  })
 }
 
 /**
  * @description 设置 canvasState
  */
 function setCanvasState(width: number, height: number) {
-  canvasState.canvasHeight = height * pixelRatio.value;
-  canvasState.canvasWidth = width * pixelRatio.value;
+  canvasState.canvasHeight = height * pixelRatio.value
+  canvasState.canvasWidth = width * pixelRatio.value
 }
 
 /**
  * @description 设置线段
  * */
 function setLine() {
-  const { ctx } = canvasState;
+  const { ctx } = canvasState
   if (ctx) {
-    ctx.setLineWidth(getDefaultLineWidth()); // 使用新的默认宽度
-    ctx.setStrokeStyle(props.penColor);
-    ctx.setLineJoin("round");
-    ctx.setLineCap("round");
+    ctx.setLineWidth(getDefaultLineWidth()) // 使用新的默认宽度
+    ctx.setStrokeStyle(props.penColor)
+    ctx.setLineJoin('round')
+    ctx.setLineCap('round')
   }
 }
 
@@ -593,8 +675,8 @@ function setLine() {
  *  @description canvas 绘制图片输出成文件类型
  */
 function canvasToImage() {
-  const { fileType, quality, exportScale } = props;
-  const { canvasWidth, canvasHeight } = canvasState;
+  const { fileType, quality, exportScale } = props
+  const { canvasWidth, canvasHeight } = canvasState
   uni.canvasToTempFilePath(
     {
       width: canvasWidth * exportScale,
@@ -611,35 +693,35 @@ function canvasToImage() {
           width: (canvasWidth * exportScale) / pixelRatio.value,
           height: (canvasHeight * exportScale) / pixelRatio.value,
           success: true,
-        };
+        }
         // #ifdef MP-DINGTALK
-        result.tempFilePath = (res as any).filePath;
+        result.tempFilePath = (res as any).filePath
         // #endif
-        emit("confirm", result);
+        emit('confirm', result)
       },
       fail: () => {
         const result: SignatureResult = {
-          tempFilePath: "",
+          tempFilePath: '',
           width: (canvasWidth * exportScale) / pixelRatio.value,
           height: (canvasHeight * exportScale) / pixelRatio.value,
           success: false,
-        };
-        emit("confirm", result);
+        }
+        emit('confirm', result)
       },
     },
     instance.proxy,
-  );
+  )
 }
 
 function clearCanvas() {
-  const { canvasWidth, canvasHeight, ctx } = canvasState;
+  const { canvasWidth, canvasHeight, ctx } = canvasState
   if (ctx) {
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight)
     if (props.backgroundColor) {
-      ctx.setFillStyle(props.backgroundColor);
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+      ctx.setFillStyle(props.backgroundColor)
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
     }
-    ctx.draw();
+    ctx.draw()
   }
 }
 
@@ -649,8 +731,8 @@ defineExpose<SignatureExpose>({
   confirm: confirmSignature,
   restore,
   revoke,
-});
+})
 </script>
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>