uni-app 原生canvas电子签名

在uni-app中实现原生canvas电子签名功能，你可以利用canvas组件进行绘制操作，并通过JavaScript监听触摸事件来记录用户的签名轨迹。以下是一个简单的实现示例：

1. 页面结构（template）

<template>
  <view class="container">
    <canvas canvas-id="signatureCanvas" style="width: 300px; height: 200px; border: 1px solid #000;"></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存签名</button>
    <image v-if="signatureImage" :src="signatureImage" style="width: 300px; height: 200px; margin-top: 20px;"></image>
  </view>
</template>

2. 脚本部分（script）

<script>
export default {
  data() {
    return {
      context: null,
      points: [],
      signatureImage: ''
    };
  },
  onLoad() {
    this.context = uni.createCanvasContext('signatureCanvas');
    this.context.setStrokeStyle('#000');
    this.context.setLineWidth(2);
    this.context.setLineCap('round');
    this.context.draw();
  },
  methods: {
    touchStart(e) {
      this.points = [{ x: e.touches[0].x, y: e.touches[0].y }];
      this.context.beginPath();
    },
    touchMove(e) {
      let touch = e.touches[0];
      let point = { x: touch.x, y: touch.y };
      this.points.push(point);
      this.context.moveTo(this.points[this.points.length - 2].x, this.points[this.points.length - 2].y);
      this.context.lineTo(point.x, point.y);
      this.context.stroke();
      this.context.draw(true); // 在这里使用 draw(true) 可以提高性能
    },
    clearCanvas() {
      this.context.clearRect(0, 0, 300, 200);
      this.context.draw();
      this.points = [];
      this.signatureImage = '';
    },
    saveSignature() {
      uni.canvasToTempFilePath({
        canvasId: 'signatureCanvas',
        success: (res) => {
          this.signatureImage = res.tempFilePath;
        },
        fail: (err) => {
          console.error(err);
        }
      }, this);
    }
  },
  onUnload() {
    this.context.draw();
  }
};
</script>

3. 样式部分（style）

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
button {
  margin: 10px;
}
</style>

4. 触摸事件绑定

在页面的onLoad生命周期中，你需要为canvas绑定触摸事件：

onLoad() {
  // ... 之前的代码
  const canvas = this.$refs.signatureCanvas; // 假设你通过ref获取canvas元素（实际在uni-app中不需要，因为已使用canvas-id）
  canvas.addEventListener('touchstart', this.touchStart);
  canvas.addEventListener('touchmove', this.touchMove);
},
onUnload() {
  // 移除事件监听器，防止内存泄漏
  const canvas = this.$refs.signatureCanvas; // 同上，实际不需要
  canvas.removeEventListener('touchstart', this.touchStart);
  canvas.removeEventListener('touchmove', this.touchMove);
  this.context.draw();
}

注意：在uni-app中，直接通过canvas-id访问canvas，不需要通过ref获取元素，因此事件绑定应通过页面级别的监听实现（例如在页面的mounted/onReady钩子中通过uni.onCanvasTouchStart和uni.onCanvasTouchMove绑定）。上面的代码示例已简化为直接使用canvas-id进行操作。