1.问题
微信开放社区链接
尝试过新版canvas,在
企业微信
中签名依然是依然断触,有问题的手机是iphoe15,系统版本以及企微版本微信版本均与签名正常的手机一致,但是那个手机就是无法正常签字,在微信中无论新旧canvas均能正常签字
2.解决方案
既然canvas的touchmove触发有问题,那么就可以通过
替代canvas的touchmove
来实现,通过在canvas上覆盖一层dom,通过这层dom的touchmove来获取手指划过的轨迹即可,此文章中并没有小程序实际代码只是使用了h5验证可行性的代码
2.1 注意点
- 要区别手指是否连续滑动,由于点击事件触发存在如下情况
区别手指是否连续滑动采用时间间隔判断
触发事件间隔小于80ms 主要用于判断是否松开手指再次滑动,正常手速来说80ms,人很难在画完一个线段后,松手再次画一个线段,如果无这个处理会出现滑动一个线段之后,再次点击另一个点会把线段和新点位连接起来
没有采取通过touchstart与touchend做一个判断是因为touchmove并不是固定一直在start与end事件中间触发
2.2 移动端浏览器体验地址
2.2 vue2代码
export default {
name: 'DomCanvasSignature',
data () {
return {
height: 302,
width: 302,
mycanvas: null,
previousPoint: {
x: 0,
y: 0
},
isPcStart: false,
removeLisner: () => { }
}
},
methods: {
initSize () {
this.width = window.innerWidth
this.height = window.innerHeight - 300
},
lisner () {
this.initSize()
window.addEventListener('resize', this.initSize)
return () => {
window.removeEventListener('resize', this.initSize)
}
},
touchstart () {
this.isPcStart = true
console.log('====start') // zdz-log
},
touchend () {
this.isPcStart = false
console.log('====end') // zdz-log
},
touchmove (e) {
console.log('move', e) // zdz-log
// 阻止滚动
e.preventDefault()
if (服务器托管e.type === 'mousemove' && !this.isPcStart) {
return
}
// 合并处理 pc 与移动端
const changeObj = e.changedTouches && e.changedTouches[0] || e
const current = { x: changeObj.clientX, y: changeObj.clientY, timeStamp: e.timeStamp }
// 1.获取元素
// 2.获取上下文,绘制工具箱
let ctx = this.mycanvas.getContext('2d')
// 3.移动画笔
const currentY = (current.y) - signatureWrapper.offsetTop
// todo 改为touchstart 与end判断 无法实现 因为move 执行存在在 start end事件之后
let diffLarge = false
console.log(current.timeStamp - this.previousPoint.timeStamp) // zdz-log
// 判断是否松手重新绘制
if (this.previousPoint.timeStamp) {
const timeDiff = current.timeStamp - this.previousPoint.timeStam服务器托管p > 80
if (timeDiff) {
diffLarge = true
}
}
const preY = diffLarge ? current.y - signatureWrapper.offsetTop : (this.previousPoint.y || current.y) - signatureWrapper.offsetTop
const moveX = diffLarge ? current.x : this.previousPoint.x || current.x
ctx.moveTo(moveX, preY < 0 ? 0 : preY)
// 4.绘制直线(轨迹,绘制路径)
ctx.lineTo(current.x, currentY < 0 ? 0 : currentY)
// 5.描边
ctx.stroke()
this.previousPoint = current
},
},
created () {
this.removeLisner = this.lisner()
},
destroyed () {
this.removeLisner()
},
mounted () {
this.mycanvas = document.querySelector('canvas')
this.signatureWrapper = document.getElementById('signatureWrapper')
},
}
.canvas {
border: 1px solid red;
}
.signatureWrapper {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
background-color: transparent;
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net