在微信小程序中实现电子签名功能方式很多,本文采用canvas绘制的方式实现。具体实现步骤如下:
- 在页面中添加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>
- 定义签名相关的数据和方法
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);}})}
})
- 实现绘制签名的功能
- 通过canvas的触摸事件(touchstart、touchmove、touchend)获取手指在canvas上的坐标点
- 使用wx.createCanvasContext(‘signCanvas’)获取canvas的渲染上下文
- 在touchstart时记录起始点坐标
- 在touchmove时,使用moveTo和lineTo连接前后两个点,并使用stroke描边
- 在touchend时,停止绘制
- 清空和保存签名
- 提供清空按钮,调用clearRect清空canvas
- 提供保存按钮,调用wx.canvasToTempFilePath将canvas绘制内容保存为临时文件,可将文件上传到服务器保存
以上代码实现了基本的电子签名功能,包括绘制签名、清空和保存签名的操作。在实际使用中,你可以根据需求对界面样式、签名线条样式等进行自定义调整。
