【微信小程序canvas】实现小程序手写板用户签名(附代码)1.

工作中公司业务需要的微信小程序用户签字功能

2.

先看效果图：

wxmlviewclass"wrapper"viewclass"handBtn"buttoncatchtap"retDraw"class"delBtn"重写/buttonbuttoncatchtap"subCanvas"class"subBtn"完成/button/viewviewclass"handCenter"canvasclass"handWriting"disable-scroll"true"bindtouchstart"uploadScaleStart"bindtouchmove"uploadScaleMove"bindtouchend"uploadScaleEnd"bindtap"mouseDown"canvas-id"handWriting"/canvas/viewviewclass"handRight"viewclass"handTitle"手写板/view/view/viewjsdatapage({data:{canvasName:'handWriting',ctx:'',canvasWidth:0,canvasHeight:0,transparent:1,//透明度selectColor:'black',lineColor:'#1A1A1A',//颜色lineSize:1.5,//笔记倍数lineMin:0.5,//最小笔画半径lineMax:4,//最大笔画半径pressure:1,//默认压力smoothness:60,//顺滑度，用60的距离来计算速度currentPoint:{},currentLine:[],//当前线条firstTouch:true,//第一次触发radius:1,//画圆的半径cutArea:{top:0,right:0,bottom:0,left:0},//裁剪区域bethelPoint:[],//保存所有线条生成的贝塞尔点；lastPoint:0,chirography:[],//笔迹currentChirography:{},//当前笔迹linePrack:[],//划线轨迹,生成线条的实际点}})初始化page({onLoad(){letcanvasNamethis.data.canvasNameletctxwx.createCanvasContext(canvasName)this.setData({ctx:ctx})varquerywx.createSelectorQuery();query.select('.handCenter').boundingClientRect(rect{query.select('.handCenter').boundingClientRect(rect{this.setData({this.setData({canvasWidth:rect.width,canvasWidth:rect.width,canvasHeight:rect.heightcanvasHeight:rect.height})})}).exec();}).exec();},},})事件函数笔迹开始//笔迹开始uploadScaleStart(e){if(e.type!'touchstart')returnfalse;letctxthis.data.ctx;ctx.setFillStyle(this.data.lineColor);//初始线条设置颜色ctx.setGlobalAlpha(this.data.transparent);//设置半透明letcurrentPoint{x:e.touches[0].x,y:e.touches[0].y}letcurrentLinethis.data.currentLine;currentLine.unshift({time:newDate().getTime(),dis:0,x:currentPoint.x,y:currentPoint.y})this.setData({currentPoint,//currentLine})if(this.data.firstTouch){this.setData({cutArea:{top:currentPoint.y,right:currentPoint.x,bottom:currentPoint.y,left:currentPoint.x},firstTouch:false})}this.pointToLine(currentLine);},笔迹移动//笔迹移动uploadScaleMove(e){if(e.type!'touchmove')returnfalse;if(e.cancelable){//判断默认行为是否已经被禁用if(!e.defaultPrevented){e.preventDefault();}}letpoint{x:e.touches[0].x,y:e.touches[0].y}//测试裁剪if(point.ythis.data.cutArea.top){this.data.cutArea.toppoint.y;}if(point.y0)this.data.cutArea.top0;if(point.xthis.data.cutArea.right){this.data.cutArea.rightpoint.x;}if(this.data.canvasWidth-point.x0){this.data.cutArea.rightthis.data.canvasWidth;}if(point.ythis.data.cutArea.bottom){this.data.cutArea.bottompoint.y;}if(this.data.canvasHeight-point.y0){this.data.cutArea.bottomthis.data.canvasHeight;}if(point.xthis.data.cutArea.left){this.data.cutArea.leftpoint.x;}if(point.x0)this.data.cutArea.left0;this.setData({lastPoint:this.data.currentPoint,currentPoint:point})letcurrentLinethis.data.currentLinecurrentLine.unshift({time:newDate().getTime(),dis:this.distance(this.data.currentPoint,this.data.lastPoint),x:point.x,y:point.y})//this.setData({//currentLine//})this.pointToLine(currentLine);},笔迹结束//笔迹结束uploadScaleEnd(e){if(e.type!'touchend')return0;letpoint{x:e.changedTouches[0].x,y:e.changedTouches[0].y}this.setData({lastPoint:this.data.currentPoint,currentPoint:point})letcurrentLinethis.data.currentLinecurrentLine.unshift({time:newDate().getTime(),dis:this.distance(this.data.currentPoint,this.data.lastPoint),x:point.x,y:point.y})//this.setData({//currentLine//})if(currentLine.length2){varinfo(currentLine[0].time-currentLine[currentLine.length-1].time)/currentLine.length;//$("#info").text(info.toFixed(2));}//一笔结束，保存笔迹的坐标点，清空，当前笔迹//增加判断是否在手写区域；this.pointToLine(currentLine);varcurrentChirography{lineSize:this.data.lineSize,lineColor:this.data.lineColor};varchirographythis.data.chirographychirography.unshift(currentChirography);this.setData({chirography})varlinePrackthis.data.linePracklinePrack.unshift(this.data.currentLine);this.setData({linePrack,currentLine:[]})},wxsspage{background:#fbfbfb;height:auto;overflow:hidden;}.wrapper{width:100%;height:95vh;margin:30rpx0;overflow:hidden;display:flex;align-content:center;flex-direction:row;justify-content:center;font-size:28rpx;}.handWriting{background:#fff;width:100%;height:95vh;}.handRight{display:inline-flex;align-items:center;}.handCenter{border:4rpxdashed#e9e9e9;flex:5;overflow:hidden;box-sizing:border-box;}.handTitle{transform:rotate(90deg);flex:1;color:#666;}.handBtnbutton{font-size:28rpx;}.handBtn{height:95vh;display:inline-flex;flex-direction:column;justify-content:space-between;align-content:space-between;flex:1;}.delBtn{position:absolute;top:550rpx;left:0rpx;transform:rotate(90deg);color:#666;}.delBtnimage{position:absolute;top:13rpx;left:25rpx;}3.

详细项目代码handwriting-weapp（微信小程序原生canvas用户签字手写板，后续更新计划组件化、优化渲染逻辑、增加功能，欢迎start和PR)