vue实现手势签到

Vue 实现手势签到的方案

手势签到功能通常涉及绘制签名并保存为图片或数据。以下是基于 Vue 的实现方法：

使用 canvas 绘制签名

安装依赖库 vue-signature-pad：

npm install vue-signature-pad --save

在组件中引入并使用：

<template>
  <div>
    <vue-signature-pad 
      ref="signaturePad" 
      :options="{ penColor: '#000' }"
    />
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

<script>
import VueSignaturePad from 'vue-signature-pad';

export default {
  components: { VueSignaturePad },
  methods: {
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    async save() {
      const { data } = await this.$refs.signaturePad.saveSignature();
      console.log(data); // 获取 base64 格式的签名图片
    }
  }
};
</script>

自定义 canvas 实现

手动实现 canvas 绘制逻辑：

<template>
  <div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
    ></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveCanvas">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = this.canvas.offsetWidth;
      this.canvas.height = this.canvas.offsetHeight;
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    saveCanvas() {
      const image = this.canvas.toDataURL('image/png');
      console.log(image); // 获取 base64 图片数据
    }
  }
};
</script>

移动端触摸支持

为移动端添加触摸事件处理：

<template>
  <canvas 
    ref="canvas"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  ></canvas>
</template>

<script>
export default {
  methods: {
    handleTouchStart(e) {
      e.preventDefault();
      const touch = e.touches[0];
      const mouseEvent = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      this.$refs.canvas.dispatchEvent(mouseEvent);
    },
    handleTouchMove(e) {
      e.preventDefault();
      const touch = e.touches[0];
      const mouseEvent = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      this.$refs.canvas.dispatchEvent(mouseEvent);
    },
    handleTouchEnd() {
      const mouseEvent = new MouseEvent('mouseup');
      this.$refs.canvas.dispatchEvent(mouseEvent);
    }
  }
};
</script>

保存签名数据

将签名数据上传至服务器：

async uploadSignature(imageData) {
  try {
    const response = await axios.post('/api/signature', {
      image: imageData
    });
    console.log('上传成功', response.data);
  } catch (error) {
    console.error('上传失败', error);
  }
}

优化用户体验

添加样式和交互优化：

canvas {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  touch-action: none; /* 禁用默认触摸行为 */
}
button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}

通过以上方法，可以实现在 Vue 中完整的手势签到功能，支持 PC 和移动端，并能保存签名数据。