uniapp 实现 签字 功能代码

下面是一个示例代码，演示了如何在uni-app中实现签字功能：

<template>
  <view>
    <canvas canvas-id="signatureCanvas" style="width: 100%; height: 300rpx; border: 1px solid #000;"></canvas>
    <button @click="clearCanvas">清空</button>
    <button @click="saveSignature">保存</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      uni.createSelectorQuery()
        .select('#signatureCanvas')
        .fields({ size: true })
        .exec((res) => {
          const canvas = res[0].node;
          this.ctx = canvas.getContext('2d');
          this.canvasWidth = res[0].width;
          this.canvasHeight = res[0].height;
          this.ctx.lineWidth = 3;
          this.ctx.strokeStyle = '#000';
        });
    },
    onTouchStart(event) {
      const { x, y } = event.changedTouches[0];
      this.ctx.beginPath();
      this.ctx.moveTo(x, y);
    },
    onTouchMove(event) {
      const { x, y } = event.changedTouches[0];
      this.ctx.lineTo(x, y);
      this.ctx.stroke();
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    },
    saveSignature() {
      uni.canvasToTempFilePath({
        canvasId: 'signatureCanvas',
        success(res) {
          // 在这里可以处理保存成功后的逻辑
          console.log(res.tempFilePath);
        },
        fail(err) {
          // 在这里可以处理保存失败后的逻辑
          console.log(err);
        }
      });
    }
  }
};
</script>

这是一个包含清空和保存功能的简单示例，通过Canvas元素来实现签字功能。在模板中，我们创建了一个Canvas元素，并绑定了相应的事件处理函数。在`mounted`钩子函数中，通过`uni.createSelectorQuery()`获取到Canvas元素的上下文（context），并进行一些初始化设置。然后，在`onTouchStart`和`onTouchMove`事件处理函数中，监听用户的触摸事件，根据用户在Canvas上的触摸位置进行绘制。`clearCanvas`函数用于清空Canvas内容，`saveSignature`函数用于保存签字结果为图片。

请注意，这只是一个简单示例，实际使用时可能需要根据具体需求进行适当的修改和优化。