uniapp小程序电子签名

### 实现 UniApp 小程序中的电子签名功能

#### 使用的组件和 API
为了实现在 UniApp 小程序中实现电子签名的功能，主要依赖于 `canvas` 组件以及一系列与之相关的 API 来完成交互式的绘画体验。具体来说：

- **Canvas 组件**：这是用来作为用户手写签名区域的基础控件[^1]。

- **wx.createCanvasContext() 方法**：此方法返回 canvas 上下文对象，允许开发者执行诸如线条绘制、颜色填充等操作来捕捉用户的书写动作[^3]。

- **触摸事件处理函数**：监听 touchstart, touchmove 和 touchend 三个阶段的变化情况，从而记录下笔迹路径数据并即时反映在 Canvas 中显示出来[^2]。

下面给出一段简单的代码片段用于说明如何构建这样一个基本的手写板界面及其核心逻辑：

<template>
  <view class="signature-pad">
    <!-- 定义一个 canvas -->
    <canvas type="2d" id="mySignaturePad"></canvas>

    <button @click="clear">清除</button>
    <button @click="saveImage">保存为图片</button>
  </view>
</template>

<script>
export default {
  data () {
    return {
      ctx: null,
      isDrawing: false,
      lastPoint: { x: undefined, y: undefined }
    };
  },
  mounted () {
    const query = uni.createSelectorQuery().in(this);
    query.select('#mySignaturePad').fields({ node: true }).exec((res) => {
      this.ctx = res[0].getContext('2d');
      
      // 设置画布样式
      this.ctx.lineWidth = 4;
      this.ctx.lineCap = 'round';
      this.ctx.strokeStyle = '#000';

      // 添加触碰事件处理器
      res[0].ontouchstart = (e) => this.startDraw(e);
      res[0].ontouchmove = (e) => this.draw(e);
      res[0].ontouchend = () => this.endDraw();
    });
  },
  methods: {
    startDraw(event){
      let point = getTouchPosition(event.touches[0]);
      this.isDrawing = true;
      this.lastPoint = point;

      function getTouchPosition(touch){
        var rect = event.target.getBoundingClientRect();
        return {
          x:touch.clientX - rect.left,
          y:touch.clientY - rect.top
        };
      }
    },

    draw(event){
      if (!this.isDrawing) return ;

      let currentPoint = getTouchPosition(event.touches[0]);

      this.ctx.beginPath();
      this.ctx.moveTo(this.lastPoint.x, this.lastPoint.y);
      this.ctx.lineTo(currentPoint.x, currentPoint.y);
      this.ctx.stroke();

      this.lastPoint = currentPoint;
    },

    endDraw(){
      this.isDrawing = false;
    },

    clear(){
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    },

    saveImage(){
      uni.canvasToTempFilePath({
        canvasId:'mySignaturePad',
        success:(res)=>{
          console.log(res.tempFilePath); // 获取到临时文件路径后可进一步处理比如上传至服务器
        }
      },this.$scope);
    }
  }
}
</script>

<style scoped>
.signature-pad{
  width: 100%;
  height: auto;
}

#mySignaturePad{
  border: 1px solid black;
  background-color:white;
  margin-bottom: 1rem;
}
</style>

这段代码展示了怎样利用 Vue.js 的语法糖特性快速搭建起一个简易版本的手写签名面板，并提供了两个按钮分别对应清空当前内容区以及导出手写图像链接给后续业务流程调用的能力。