微信小程序开发技巧:canvas实现电子签名

在微信小程序中实现电子签名功能方式很多,本文采用canvas绘制的方式实现。具体实现步骤如下:

1. 在页面中添加canvas元素

<view class="container">
  <canvas canvas-id="signCanvas" class="canvas" disable-scroll=true @touchstart="startDrawing" @touchmove.stop="moveDrawing" @touchend="stopDrawing"></canvas>
   <button type="primary" bindtap="saveSignature">完成</button>
  <button type="primary" bindtap="clearCanvas">清除</button>
 
</view>

2. 定义签名相关的数据和方法

Page({
  data: {
    isDrawing: false,
    lastPoint: {}
  },

  startDrawing(e) {
    const { x, y } = e.touches[0];
    this.data.lastPoint = { x, y };
    this.data.isDrawing = true;
  },

  stopDrawing() {
    this.data.isDrawing = false;
  },

  moveDrawing(e) {
    if (!this.data.isDrawing) return;
    const ctx = wx.createCanvasContext('signCanvas');
    ctx.moveTo(this.data.lastPoint.x, this.data.lastPoint.y);

    const { x, y } = e.touches[0];
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.draw(true);

    this.data.lastPoint = { x, y };
  },

  clearCanvas() {
    const ctx = wx.createCanvasContext('signCanvas');
    ctx.clearRect(0, 0, 300, 150);
    ctx.draw();
  },

  saveSignature() {
    wx.canvasToTempFilePath({
      canvasId: 'signCanvas',
      success: res => {
        // 将签名图片上传到服务器或进行其他操作
        console.log(res.tempFilePath);
      }
    })
  }
})

3. 实现绘制签名的功能

• 通过canvas的触摸事件(touchstart、touchmove、touchend)获取手指在canvas上的坐标点
• 使用wx.createCanvasContext(‘signCanvas’)获取canvas的渲染上下文
• 在touchstart时记录起始点坐标
• 在touchmove时,使用moveTo和lineTo连接前后两个点,并使用stroke描边
• 在touchend时,停止绘制

4. 清空和保存签名

• 提供清空按钮,调用clearRect清空canvas
• 提供保存按钮,调用wx.canvasToTempFilePath将canvas绘制内容保存为临时文件,可将文件上传到服务器保存

以上代码实现了基本的电子签名功能,包括绘制签名、清空和保存签名的操作。在实际使用中,你可以根据需求对界面样式、签名线条样式等进行自定义调整。