关于小程序签字问题

欢迎入坑
微信小程序关于合同签字问题。在微信小程序内使用canvas时,为判定是否开始触发签字时使用触发标记

 <canvas  
    bindtouchstart="touchStart" 
    bindtouchmove="touchMove" 
    bindtouchend="touchEnd" 
    bindtouchcancel="touchCancel" 
    binderror="canvasError" >
</canvas>

这里就开始了你是绑定bindtouchmove事件还是bindtouchstart事件那?
正常情况点击时触发即可,但是ios和android手机的坑就来了,ios当你点击时就会捕捉生成点,可以正常填充,但是android确是毛都没有,就会导致填充签字的时候wx.arrayBufferToBase64(data)传出的图片码解析出来是一片黑,所以还是使用bindtouchmove触发比较适应两种手机系统。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中实现签字面板的方法如下: 1. 在wxml文件中添加canvas标签,设置宽高和id属性,用于后续操作。 ```html <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在js文件中获取canvas对象,设置画笔颜色、线条宽度等属性,并监听touchstart、touchmove、touchend事件,实现手写签字功能。 ```javascript // 获取canvas对象 const ctx = wx.createCanvasContext('myCanvas') // 设置画笔颜色、线条宽度等属性 ctx.setStrokeStyle('black') ctx.setLineWidth(3) ctx.setLineCap('round') ctx.setLineJoin('round') // 监听touchstart、touchmove、touchend事件,实现手写签字功能 let startX = 0 let startY = 0 let isTouchMove = false wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) canvas.addEventListener('touchstart', (e) => { startX = e.touches[0].x startY = e.touches[0].y isTouchMove = false }) canvas.addEventListener('touchmove', (e) => { const endX = e.touches[0].x const endY = e.touches[0].y ctx.moveTo(startX, startY) ctx.lineTo(endX, endY) ctx.stroke() startX = endX startY = endY isTouchMove = true }) canvas.addEventListener('touchend', (e) => { if (!isTouchMove) { ctx.beginPath() ctx.arc(startX, startY, 1.5, 0, 2 * Math.PI) ctx.fill() } }) }) ``` 3. 在wxml文件中添加保存按钮,点击按钮后将canvas转换为图片并保存到本地相册。 ```html <button type="primary" bindtap="saveImage">保存</button> ``` ```javascript // 点击保存按钮,将canvas转换为图片并保存到本地相册 saveImage() { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) }, fail: () => { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }) } }) } }) } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值