hy-app 0.4.13 → 0.5.0

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

@@ -1,781 +1,637 @@
 <template>
-  <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"
-        :style="canvasStyle"
-        :width="canvasState.canvasWidth"
-        :height="canvasState.canvasHeight"
-        :canvas-id="canvasId"
-        :id="canvasId"
-        :disable-scroll="disableScroll"
-        @touchstart="startDrawing"
-        @touchend="stopDrawing"
-        @touchmove="draw"
-        type="2d"
-      />
-      <!-- #endif  -->
-      <!-- #ifndef MP-WEIXIN -->
-      <canvas
-        class="hy-signature__content-canvas"
-        :canvas-id="canvasId"
-        :style="canvasStyle"
-        :width="canvasState.canvasWidth"
-        :height="canvasState.canvasHeight"
-        :id="canvasId"
-        :disable-scroll="disableScroll"
-        @touchstart="startDrawing"
-        @touchend="stopDrawing"
-        @touchmove="draw"
-      />
-      <!-- #endif  -->
+    <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"
+                :style="canvasStyle"
+                :width="canvasState.canvasWidth"
+                :height="canvasState.canvasHeight"
+                :canvas-id="canvasId"
+                :id="canvasId"
+                :disable-scroll="disableScroll"
+                @touchstart="startDrawing"
+                @touchend="stopDrawing"
+                @touchmove="draw"
+                type="2d"
+            />
+            <!-- #endif  -->
+            <!-- #ifndef MP-WEIXIN -->
+            <canvas
+                class="hy-signature__content-canvas"
+                :canvas-id="canvasId"
+                :style="canvasStyle"
+                :width="canvasState.canvasWidth"
+                :height="canvasState.canvasHeight"
+                :id="canvasId"
+                :disable-scroll="disableScroll"
+                @touchstart="startDrawing"
+                @touchend="stopDrawing"
+                @touchmove="draw"
+            />
+            <!-- #endif  -->
+        </view>
+        <view class="hy-signature__footer">
+            <slot
+                v-if="$slots.footer"
+                name="footer"
+                :clear="clear"
+                :confirm="confirmSignature"
+                :current-step="currentStep"
+                :revoke="revoke"
+                :restore="restore"
+                :can-undo="lines.length > 0"
+                :can-redo="redoLines.length > 0"
+                :history-list="lines"
+            >
+            </slot>
+            <template v-else>
+                <block v-if="enableHistory">
+                    <hy-button
+                        size="small"
+                        plain
+                        shape="circle"
+                        @click="revoke"
+                        :disabled="lines.length <= 0"
+                        :text="revokeText"
+                    ></hy-button>
+                    <hy-button
+                        size="small"
+                        plain
+                        shape="circle"
+                        @click="restore"
+                        :disabled="redoLines.length <= 0"
+                        :text="restoreText"
+                    ></hy-button>
+                </block>
+                <hy-button
+                    size="small"
+                    plain
+                    shape="circle"
+                    @click="clear"
+                    :text="clearText"
+                ></hy-button>
+                <hy-button
+                    size="small"
+                    shape="circle"
+                    @click="confirmSignature"
+                    :text="confirmText"
+                ></hy-button>
+            </template>
+        </view>
     </view>
-    <view class="hy-signature__footer">
-      <slot
-        name="footer"
-        :clear="clear"
-        :confirm="confirmSignature"
-        :current-step="currentStep"
-        :revoke="revoke"
-        :restore="restore"
-        :can-undo="lines.length > 0"
-        :can-redo="redoLines.length > 0"
-        :history-list="lines"
-      >
-        <block v-if="enableHistory">
-          <hy-button
-            size="small"
-            plain
-            shape="circle"
-            @click="revoke"
-            :disabled="lines.length <= 0"
-            :text="revokeText"
-          ></hy-button>
-          <hy-button
-            size="small"
-            plain
-            shape="circle"
-            @click="restore"
-            :disabled="redoLines.length <= 0"
-            :text="restoreText"
-          ></hy-button>
-        </block>
-        <hy-button
-          size="small"
-          plain
-          shape="circle"
-          @click="clear"
-          :text="clearText"
-        ></hy-button>
-        <hy-button
-          size="small"
-          shape="circle"
-          @click="confirmSignature"
-          :text="confirmText"
-        ></hy-button>
-      </slot>
-    </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-signature",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-signature',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        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 "../../libs";
-import type {
-  SignatureExpose,
-  SignatureResult,
-  Point,
-  Line,
-  ISignatureEmits,
-} from "./typing";
+import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit, getRect, guid } from '../../libs'
+import type { SignatureExpose, SignatureResult, Point, Line, ISignatureEmits } from './typing'
 // #ifdef MP-WEIXIN
-import { canvas2dAdapter } from "./canvasHelper";
+import { canvas2dAdapter } from './canvasHelper'
 // #endif
+import signatureProps from './props'
 
 // 组件
-import HyButton from "../hy-button/hy-button.vue";
+import HyButton from '../hy-button/hy-button.vue'
 
 /**
  * 用于签名场景，基于 Canvas 实现的签名组件。提供了基础签名、历史记录、笔锋效果等功能。
  * @displayName hy-signature
  */
-defineOptions({});
-
-// 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); // 像素比
+defineOptions({})
+
+const props = defineProps(signatureProps)
+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上下文
-});
+    canvasWidth: 0,
+    canvasHeight: 0,
+    ctx: null as UniApp.CanvasContext | null // canvas上下文
+})
 
 watch(
-  () => props.penColor,
-  () => {
-    setLine();
-  },
-);
+    () => props.penColor,
+    () => {
+        setLine()
+    }
+)
 
 watch(
-  () => props.lineWidth,
-  () => {
-    setLine();
-  },
-);
+    () => props.lineWidth,
+    () => {
+        setLine()
+    }
+)
 
 const canvasStyle = computed(() => {
-  const style: CSSProperties = {};
-  if (props.width) {
-    style.width = addUnit(props.width);
-  }
+    const style: CSSProperties = {}
+    if (props.width) {
+        style.width = addUnit(props.width)
+    }
 
-  if (props.height) {
-    style.height = addUnit(props.height);
-  }
+    if (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)
 }
 
 /**
  * @description 获取默认笔画宽度
  * */
 const getDefaultLineWidth = () => {
-  if (props.pressure) {
-    // 在压感模式下，使用最大和最小宽度的平均值作为默认值
-    return (props.maxWidth + props.minWidth) / 2;
-  }
-  return props.lineWidth;
-};
+    if (props.pressure) {
+        // 在压感模式下，使用最大和最小宽度的平均值作为默认值
+        return (props.maxWidth + props.minWidth) / 2
+    }
+    return props.lineWidth
+}
 
 /**
  * @description 开始画线
  * */
 const startDrawing = (e: any) => {
-  e.preventDefault();
-  drawing.value = true;
-  setLine();
-  emit("start", e);
-
-  // 创建新线条，同时保存当前的所有绘制参数
-  const { x, y } = e.touches[0];
-  currentLine.value = {
-    points: [
-      {
-        x,
-        y,
-        t: Date.now(), // 使用 t 替换 width
-      },
-    ],
-    color: props.penColor,
-    width: getDefaultLineWidth(),
-    backgroundColor: props.backgroundColor,
-    isPressure: props.pressure, // 添加笔锋模式标记
-  };
-
-  // 清空重做记录
-  redoLines.value = [];
-  draw(e);
-};
+    e.preventDefault()
+    drawing.value = true
+    setLine()
+    emit('start', e)
+
+    // 创建新线条，同时保存当前的所有绘制参数
+    const { x, y } = e.touches[0]
+    currentLine.value = {
+        points: [
+            {
+                x,
+                y,
+                t: Date.now() // 使用 t 替换 width
+            }
+        ],
+        color: props.penColor,
+        width: getDefaultLineWidth(),
+        backgroundColor: props.backgroundColor,
+        isPressure: props.pressure // 添加笔锋模式标记
+    }
+
+    // 清空重做记录
+    redoLines.value = []
+    draw(e)
+}
 
 /**
  * @description 结束画线
  * */
 const stopDrawing = (e: TouchEvent) => {
-  e.preventDefault();
-  drawing.value = false;
-  if (currentLine.value) {
-    // 保存完整的线条信息，包括所有点的参数
-    lines.value.push({
-      ...currentLine.value,
-      points: currentLine.value.points.map((point) => ({
-        ...point,
-        t: point.t,
-        speed: point.speed,
-        distance: point.distance,
-        lineWidth: point.lineWidth,
-        lastX1: point.lastX1,
-        lastY1: point.lastY1,
-        lastX2: point.lastX2,
-        lastY2: point.lastY2,
-        isFirstPoint: point.isFirstPoint,
-      })),
-    });
-    currentStep.value = lines.value.length;
-  }
-  currentLine.value = undefined;
-  const { ctx } = canvasState;
-  if (ctx) ctx.beginPath();
-  emit("end", e);
-};
+    e.preventDefault()
+    drawing.value = false
+    if (currentLine.value) {
+        // 保存完整的线条信息，包括所有点的参数
+        lines.value.push({
+            ...currentLine.value,
+            points: currentLine.value.points.map((point) => ({
+                ...point,
+                t: point.t,
+                speed: point.speed,
+                distance: point.distance,
+                lineWidth: point.lineWidth,
+                lastX1: point.lastX1,
+                lastY1: point.lastY1,
+                lastX2: point.lastX2,
+                lastY2: point.lastY2,
+                isFirstPoint: point.isFirstPoint
+            }))
+        })
+        currentStep.value = lines.value.length
+    }
+    currentLine.value = undefined
+    const { ctx } = canvasState
+    if (ctx) ctx.beginPath()
+    emit('end', e)
+}
 
 /**
  * @description 初始化 canvas
  * @param forceUpdate 是否强制更新
  */
 const initCanvas = (forceUpdate: boolean = false) => {
-  // 如果不是强制更新，且已经初始化过 canvas，则不再重复初始化
-  if (!forceUpdate && canvasState.canvasHeight && canvasState.canvasWidth) {
-    return;
-  }
-  getContext().then(() => {
-    const { ctx } = canvasState;
-    if (ctx && props.backgroundColor) {
-      ctx.setFillStyle(props.backgroundColor);
-      ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight);
-      ctx.draw();
+    // 如果不是强制更新，且已经初始化过 canvas，则不再重复初始化
+    if (!forceUpdate && canvasState.canvasHeight && canvasState.canvasWidth) {
+        return
     }
-  });
-};
+    getContext().then(() => {
+        const { ctx } = canvasState
+        if (ctx && props.backgroundColor) {
+            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;
-
-  if (!drawing.value || props.disabled || !ctx) return;
-  const { x, y } = e.touches[0];
+    e.preventDefault()
+    const { ctx } = canvasState
 
-  const point: Point = {
-    x,
-    y,
-    t: Date.now(),
-  };
+    if (!drawing.value || props.disabled || !ctx) return
+    const { x, y } = e.touches[0]
 
-  if (currentLine.value) {
-    const points = currentLine.value.points;
-    const prePoint = points[points.length - 1];
-
-    if (prePoint.t === point.t || (prePoint.x === x && prePoint.y === y)) {
-      return;
+    const point: Point = {
+        x,
+        y,
+        t: Date.now()
     }
 
-    // 计算点的速度和距离
-    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);
+    if (currentLine.value) {
+        const points = currentLine.value.points
+        const prePoint = points[points.length - 1]
 
-    if (props.pressure) {
-      point.lineWidth = calculateLineWidth(point.speed);
-      // 处理线宽变化率限制
-      if (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%
-          if (Math.abs(rate) > maxRate) {
-            const per = rate > 0 ? maxRate : -maxRate;
-            point.lineWidth = prePoint.lineWidth * (1 + per);
-          }
+        if (prePoint.t === point.t || (prePoint.x === x && prePoint.y === y)) {
+            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)
+
+        if (props.pressure) {
+            point.lineWidth = calculateLineWidth(point.speed)
+            // 处理线宽变化率限制
+            if (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%
+                    if (Math.abs(rate) > maxRate) {
+                        const per = rate > 0 ? maxRate : -maxRate
+                        point.lineWidth = prePoint.lineWidth * (1 + per)
+                    }
+                }
+            }
         }
-      }
-    }
 
-    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);
-    } else if (points.length >= 2) {
-      // 笔锋模式使用贝塞尔曲线
-      drawSmoothLine(prePoint, 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)
+        } else if (points.length >= 2) {
+            // 笔锋模式使用贝塞尔曲线
+            drawSmoothLine(prePoint, point)
+        }
     }
-  }
 
-  emit("signing", e);
-};
+    emit('signing', e)
+}
 
 /**
  * @description 重绘整个画布
  * */
 const redrawCanvas = () => {
-  const { ctx } = canvasState;
-  if (!ctx) return;
-
-  // 清除画布并设置背景
-  if (props.backgroundColor) {
-    ctx.setFillStyle(props.backgroundColor);
-    ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight);
-  } else {
-    ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight);
-  }
-
-  // 如果没有线条，只需要清空画布
-  if (lines.value.length === 0) {
-    ctx.draw();
-    return;
-  }
-
-  // 收集所有绘制操作，最后一次性 draw
-  lines.value.forEach((line) => {
-    if (!line.points.length) return;
-
-    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 (distance <= 2) {
-          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 { ctx } = canvasState
+    if (!ctx) return
 
-        const lineWidth = point.lineWidth || line.width;
-        point.isFirstPoint = true;
-      });
+    // 清除画布并设置背景
+    if (props.backgroundColor) {
+        ctx.setFillStyle(props.backgroundColor)
+        ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
     } else {
-      // 非笔锋模式的重绘
-      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();
-      });
+        ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+    }
+
+    // 如果没有线条，只需要清空画布
+    if (lines.value.length === 0) {
+        ctx.draw()
+        return
     }
-  });
 
-  // 所有线条绘制完成后，一次性更新画布
-  ctx.draw();
-};
+    // 收集所有绘制操作，最后一次性 draw
+    lines.value.forEach((line) => {
+        if (!line.points.length) return
+
+        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 (distance <= 2) {
+                    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 lineWidth = point.lineWidth || line.width
+                point.isFirstPoint = true
+            })
+        } else {
+            // 非笔锋模式的重绘
+            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()
+            })
+        }
+    })
+
+    // 所有线条绘制完成后，一次性更新画布
+    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 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;
-  } 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 lineWidth = point.lineWidth || props.lineWidth;
-
-  // 绘制贝塞尔曲线
-  if (typeof prePoint.lastX1 === "number") {
-    // 设置线宽
-    ctx.setLineWidth(lineWidth);
-    // 绘制第一段曲线
-    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();
+    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)
+
+    if (distance <= 2) {
+        // 对于非常近的点，直接使用中点
+        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)
     }
 
-    // 批量更新绘制内容
-    ctx.draw(true);
-  } else {
-    point.isFirstPoint = true;
-  }
+    // 计算线宽
+    const lineWidth = point.lineWidth || props.lineWidth
+
+    // 绘制贝塞尔曲线
+    if (typeof prePoint.lastX1 === 'number') {
+        // 设置线宽
+        ctx.setLineWidth(lineWidth)
+        // 绘制第一段曲线
+        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.draw(true)
+    } else {
+        point.isFirstPoint = true
+    }
 }
 
 onMounted(() => {
-  initCanvas();
-});
+    initCanvas()
+})
 
 onBeforeMount(() => {
-  // #ifdef MP
-  pixelRatio.value = uni.getSystemInfoSync().pixelRatio;
-  // #endif
-});
+    // #ifdef MP
+    pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+    // #endif
+})
 
 /**
  * @description 获取canvas上下文
  */
 function getContext() {
-  return new Promise<UniApp.CanvasContext>((resolve) => {
-    const { ctx } = canvasState;
+    return new Promise<UniApp.CanvasContext>((resolve) => {
+        const { ctx } = canvasState
 
-    if (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);
-      if (canvasState.ctx) {
-        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value);
-      }
-      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);
+        if (ctx) {
+            return resolve(ctx)
         }
-      },
-    );
-    // #endif
-  });
+        // #ifndef MP-WEIXIN
+        getRect(`#${canvasId.value}`, false, instance).then((canvasRect) => {
+            setCanvasState(canvasRect.width!, canvasRect.height!)
+            canvasState.ctx = uni.createCanvasContext(canvasId.value, instance.proxy)
+            if (canvasState.ctx) {
+                canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
+            }
+            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)
+            }
+        })
+        // #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;
-  if (ctx) {
-    ctx.setLineWidth(getDefaultLineWidth()); // 使用新的默认宽度
-    ctx.setStrokeStyle(props.penColor);
-    ctx.setLineJoin("round");
-    ctx.setLineCap("round");
-  }
+    const { ctx } = canvasState
+    if (ctx) {
+        ctx.setLineWidth(getDefaultLineWidth()) // 使用新的默认宽度
+        ctx.setStrokeStyle(props.penColor)
+        ctx.setLineJoin('round')
+        ctx.setLineCap('round')
+    }
 }
 
 /**
  *  @description canvas 绘制图片输出成文件类型
  */
 function canvasToImage() {
-  const { fileType, quality, exportScale } = props;
-  const { canvasWidth, canvasHeight } = canvasState;
-  uni.canvasToTempFilePath(
-    {
-      width: canvasWidth * exportScale,
-      height: canvasHeight * exportScale,
-      destWidth: canvasWidth * exportScale,
-      destHeight: canvasHeight * exportScale,
-      fileType,
-      quality,
-      canvasId: canvasId.value,
-      canvas: canvas,
-      success: (res) => {
-        const result: SignatureResult = {
-          tempFilePath: res.tempFilePath,
-          width: (canvasWidth * exportScale) / pixelRatio.value,
-          height: (canvasHeight * exportScale) / pixelRatio.value,
-          success: true,
-        };
-        // #ifdef MP-DINGTALK
-        result.tempFilePath = (res as any).filePath;
-        // #endif
-        emit("confirm", result);
-      },
-      fail: () => {
-        const result: SignatureResult = {
-          tempFilePath: "",
-          width: (canvasWidth * exportScale) / pixelRatio.value,
-          height: (canvasHeight * exportScale) / pixelRatio.value,
-          success: false,
-        };
-        emit("confirm", result);
-      },
-    },
-    instance.proxy,
-  );
+    const { fileType, quality, exportScale } = props
+    const { canvasWidth, canvasHeight } = canvasState
+    uni.canvasToTempFilePath(
+        {
+            width: canvasWidth * exportScale,
+            height: canvasHeight * exportScale,
+            destWidth: canvasWidth * exportScale,
+            destHeight: canvasHeight * exportScale,
+            fileType,
+            quality,
+            canvasId: canvasId.value,
+            canvas: canvas,
+            success: (res) => {
+                const result: SignatureResult = {
+                    tempFilePath: res.tempFilePath,
+                    width: (canvasWidth * exportScale) / pixelRatio.value,
+                    height: (canvasHeight * exportScale) / pixelRatio.value,
+                    success: true
+                }
+                // #ifdef MP-DINGTALK
+                result.tempFilePath = (res as any).filePath
+                // #endif
+                emit('confirm', result)
+            },
+            fail: () => {
+                const result: SignatureResult = {
+                    tempFilePath: '',
+                    width: (canvasWidth * exportScale) / pixelRatio.value,
+                    height: (canvasHeight * exportScale) / pixelRatio.value,
+                    success: false
+                }
+                emit('confirm', result)
+            }
+        },
+        instance.proxy
+    )
 }
 
 function clearCanvas() {
-  const { canvasWidth, canvasHeight, ctx } = canvasState;
-  if (ctx) {
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-    if (props.backgroundColor) {
-      ctx.setFillStyle(props.backgroundColor);
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    const { canvasWidth, canvasHeight, ctx } = canvasState
+    if (ctx) {
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+        if (props.backgroundColor) {
+            ctx.setFillStyle(props.backgroundColor)
+            ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+        }
+        ctx.draw()
     }
-    ctx.draw();
-  }
 }
 
 defineExpose<SignatureExpose>({
-  init: initCanvas,
-  clear,
-  confirm: confirmSignature,
-  restore,
-  revoke,
-});
+    init: initCanvas,
+    clear,
+    confirm: confirmSignature,
+    restore,
+    revoke
+})
 </script>
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>