当前位置: 首页 > article >正文

实现手机手势签字功能

1、创建Canvas组件

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

<template>
  <div>
    <canvas
      ref="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组件:

手机手势签字

效果图

在这里插入图片描述


http://www.kler.cn/a/585247.html

相关文章:

  • 在线教育网站项目第四步 :学习Vue3 + Nuxt3+springcloud,服务器为ubuntu24.04
  • 日志Python安全之SSTI——Flask/Jinja2
  • go中实现子模块调用main包中函数的方法
  • 外星人入侵-Python-二
  • 12 DHCP的内容和HTTP的改良
  • 车载以太网测试-11【网络层-ICMP协议】
  • 02-Canvas-fabric.BaseBrush绘图工具
  • 通信协议传输过程中的序列化和反序列化机制
  • 2025-03-14 学习记录--C/C++-PTA 习题2-1 求整数均值
  • AI时代下的心理咨询师新利器:心理咨询小程序
  • 蓝桥杯十天冲刺(C++)-输入输出
  • 使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三讲)
  • 苍穹外卖实战附源码-DAY1
  • 优选算法的匠心之艺:二分查找专题(一)
  • 微前端解决方案之MicroApp
  • 基于YOLO11深度学习的舌苔舌象检测识别与诊断系统【python源码+Pyqt5界面+数据集+训练代码】
  • OpenCV特征提取与深度学习CNN特征提取差异
  • 58.Harmonyos NEXT 图片预览组件架构设计与实现原理
  • 【Idea】 xml 文本粘贴保持原有文本的缩进格式
  • C语言的机器学习