hy-app 0.3.0 → 0.3.2

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

@@ -1,6 +1,9 @@
 <template>
   <view :class="['hy-signature', customClass]" :style="customStyle">
-    <view class="hy-signature__content" :style="{ borderRadius: addUnit(round) }">
+    <view
+      class="hy-signature__content"
+      :style="{ borderRadius: addUnit(round) }"
+    >
       <!-- #ifdef MP-WEIXIN -->
       <canvas
         class="hy-signature__content-canvas"
@@ -61,7 +64,13 @@
             :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"
@@ -72,40 +81,56 @@
     </view>
   </view>
 </template>
+
 <script lang="ts">
 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 } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, getRect, guid } from '../../utils'
-import type { SignatureExpose, SignatureResult, Point, Line, ISignatureEmits } from './typing'
+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 '../hy-button/hy-button.vue'
+import HyButton from "../hy-button/hy-button.vue";
 
 /**
  * 用于签名场景，基于 Canvas 实现的签名组件。提供了基础签名、历史记录、笔锋效果等功能。
  * @displayName hy-signature
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 签名笔颜色 */
   penColor: {
     type: String,
-    default: '#000',
+    default: "#000",
   },
   /** 签名笔宽度 */
   lineWidth: {
@@ -115,27 +140,27 @@ const props = defineProps({
   /** 清空按钮的文本 */
   clearText: {
     type: String,
-    default: '清空',
+    default: "清空",
   },
   /** 撤回按钮的文本 */
   revokeText: {
     type: String,
-    default: '撤销',
+    default: "撤销",
   },
   /** 恢复按钮的文本 */
   restoreText: {
     type: String,
-    default: '恢复',
+    default: "恢复",
   },
   /** 确认按钮的文本 */
   confirmText: {
     type: String,
-    default: '确认',
+    default: "确认",
   },
   /** 目标文件的类型 */
   fileType: {
     type: String,
-    default: 'png',
+    default: "png",
   },
   /** 签名笔颜色 */
   quality: {
@@ -165,7 +190,7 @@ const props = defineProps({
   /** 边框圆角 */
   round: {
     type: String,
-    default: '10rpx',
+    default: "10rpx",
   },
   /** 画板的背景色 */
   backgroundColor: String,
@@ -214,66 +239,67 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   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 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);
 }
 
 /**
@@ -282,22 +308,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: [
       {
@@ -310,19 +336,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({
@@ -339,14 +365,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
@@ -355,320 +381,336 @@ 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");
   }
 }
 
@@ -676,8 +718,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,
@@ -694,35 +736,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();
   }
 }
 
@@ -732,8 +774,8 @@ defineExpose<SignatureExpose>({
   confirm: confirmSignature,
   restore,
   revoke,
-})
+});
 </script>
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>