当前位置：首页 > VUE

vue实现手势签到

2026-03-30 11:10:15VUE

实现手势签到的步骤

安装依赖 需要安装hammerjs库来处理手势识别，通过npm或yarn安装：

npm install hammerjs
# 或
yarn add hammerjs

引入Hammer.js 在Vue组件中引入hammerjs并初始化手势识别：

import Hammer from 'hammerjs';

export default {
  mounted() {
    const element = this.$el;
    const hammer = new Hammer(element);

    hammer.on('pan', (event) => {
      // 处理手势移动逻辑
    });
  }
}

创建画布 在模板中添加一个画布元素用于绘制签名：

<template>
  <div class="signature-pad" ref="signaturePad">
    <canvas ref="canvas" width="400" height="300"></canvas>
  </div>
</template>

绘制签名 在手势事件中获取坐标并绘制到画布上：

hammer.on('pan', (event) => {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  ctx.lineTo(event.center.x, event.center.y);
  ctx.stroke();
});

保存签名 添加一个按钮来保存签名并转换为图片：

<button @click="saveSignature">保存签名</button>

methods: {
  saveSignature() {
    const canvas = this.$refs.canvas;
    const image = canvas.toDataURL('image/png');
    // 可以发送到服务器或保存到本地
  }
}

清除签名 添加一个清除按钮重置画布：

<button @click="clearSignature">清除</button>

methods: {
  clearSignature() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
  }
}

优化用户体验

设置样式 为画布添加边框和背景色以提升可视性：

.signature-pad {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

canvas {
  background-color: white;
}

添加触摸支持 确保在移动设备上也能正常使用，调整Hammer.js配置：

vue实现手势签到

const hammer = new Hammer(element, {
  touchAction: 'auto',
  inputClass: Hammer.TouchInput
});

完整组件示例

<template>
  <div class="signature-container">
    <div class="signature-pad" ref="signaturePad">
      <canvas ref="canvas" width="400" height="300"></canvas>
    </div>
    <div class="controls">
      <button @click="saveSignature">保存</button>
      <button @click="clearSignature">清除</button>
    </div>
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';

    const hammer = new Hammer(this.$refs.signaturePad);
    hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });

    hammer.on('panstart', (event) => {
      ctx.beginPath();
      ctx.moveTo(event.center.x, event.center.y);
    });

    hammer.on('pan', (event) => {
      ctx.lineTo(event.center.x, event.center.y);
      ctx.stroke();
    });
  },
  methods: {
    saveSignature() {
      const canvas = this.$refs.canvas;
      const image = canvas.toDataURL('image/png');
      console.log('签名已保存:', image);
    },
    clearSignature() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
  }
}
</script>

<style>
.signature-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.signature-pad {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
canvas {
  background-color: white;
}
.controls button {
  margin: 0 5px;
  padding: 5px 10px;
}
</style>