vue H5页面手机端 利用canvas 签名

签名首先用一个canvas标签,上面加三个代码,分别是点击,移动,离开。这里点击是开始画笔的地方,若是不加@touchstart 笔头会发生偏移,能够试试。canvas

@toucheend也是如此。尾巴也会出现偏移,  签名最重要的地方是移动,@touchmove this

这里比较重要的是,this.top  ( 距离顶部距离)和this.i( 滚动条滚动的距离 )  。它这个移动产生偏移量是可能有俩种缘由,第一是产品需求是要放中间,距离顶部有一些距离,这时候,画布是离顶部有必定距离的。签名是产生偏移,解决方法:就是在开始的时候拿到距离加入移动偏移量也就是this.top 3d

 

 第二种是,你页面进行滚动之后,签名会偏移,偏移量刚恰好是滚动距离。解决方法就将滚动距离补上就好了,也就是this.i。blog

相关文章
相关标签/搜索