实现手机手势签字功能

1、创建Canvas组件

在src/components目录下创建一个新的组件文件SignatureCanvas.vue：

<template><div><canvasref="canvas"@mousedown="startDrawing"@mousemove="draw"@mouseup="stopDrawing"@mouseleave="stopDrawing"@touchstart="startDrawing"@touchmove="draw"@touchend="stopDrawing"></canvas></div>
</template><script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';export default defineComponent({name: 'SignatureCanvas',setup() {const canvas = ref<HTMLCanvasElement | null>(null);let ctx: CanvasRenderingContext2D | null = null;let isDrawing = false;onMounted(() => {if (canvas.value) {ctx = canvas.value.getContext('2d');if (ctx) {ctx.lineWidth = 2;ctx.lineCap = 'round';ctx.strokeStyle = '#000';}}});const startDrawing = (event: MouseEvent | TouchEvent) => {isDrawing = true;const { offsetX, offsetY } = getEventPosition(event);if (ctx) {ctx.beginPath();ctx.moveTo(offsetX, offsetY);}};const draw = (event: MouseEvent | TouchEvent) => {if (!isDrawing) return;const { offsetX, offsetY } = getEventPosition(event);if (ctx) {ctx.lineTo(offsetX, offsetY);ctx.stroke();}};const stopDrawing = () => {isDrawing = false;if (ctx) {ctx.closePath();}};const getEventPosition = (event: MouseEvent | TouchEvent) => {if (canvas.value) {const rect = canvas.value.getBoundingClientRect();if (event instanceof TouchEvent) {const touch = event.touches[0];return {offsetX: touch.clientX - rect.left,offsetY: touch.clientY - rect.top,};} else {return {offsetX: event.offsetX,offsetY: event.offsetY,};}}return { offsetX: 0, offsetY: 0 };};return {canvas,startDrawing,draw,stopDrawing,};},
});
</script><style scoped>
canvas {border: 1px solid #000;touch-action: none; /* 防止触摸时页面滚动 */
}
</style>

2、在主组件中使用Canvas组件

在src/App.vue中使用刚刚创建的SignatureCanvas组件：

效果图