1.wxml!--pages/page/cvsAutograph/cvsAutograph.wxml--viewclass"wrapper"viewclass"handBtn"buttonclass"backBtn"返回/buttonbuttoncatchtap"cleardraw"class"delBtn"清空/buttonbuttoncatchtap"getimg"class"subBtn"完成/button/viewviewclass"handCenter"canvasclass"canvas"style"height:{{cvsHeight'100%'?cvsHeight:cvsHeight+'px'}}"id"canvas"canvas-id"canvas"disable-scroll"true"bindtouchstart"canvasStart"bindtouchmove"canvasMove"bindtouchend"canvasEnd"touchcancel"canvasEnd"binderror"canvasIdErrorCallback"/canvascover-imageclass'overImg'src"{{src}}"wx:if"{{src!''}}"/cover-image/viewviewclass"handRight"viewclass"handTitle"签名板/view/view/view2.wxss/*pages/page/cvsAutograph/cvsAutograph.wxss*/page{background:#fbfbfb;height:auto;overflow:hidden;}canvas{width:100%;/*height:100%;*/}.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{position:relative;border:4rpxdashed#e9e9e9;flex:5;overflow:hidden;box-sizing:border-box;}.overImg{position:absolute;top:0;left:0;background-color:#fff;}.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;}.backBtn{position:absolute;top:50rpx;left:0rpx;transform:rotate(90deg);color:#666;}.delBtn{position:absolute;top:250rpx;left:0rpx;transform:rotate(90deg);color:#666;}.subBtn{position:absolute;bottom:52rpx;left:-3rpx;display:inline-flex;transform:rotate(90deg);background:#008ef6;color:#fff;margin-bottom:30rpx;text-align:center;justify-content:center;}3.js//canvas全局配置varcontextnull;//使用wx.createContext获取绘图上下文contextvararrx[];//所有点的X轴集合vararry[];//所有点的Y轴集合vararrz[];//标记数组varcanvasw0;//画布的宽varcanvash0;//画布的高vartop0;varleft0;letappgetApp();//注册页面Page({canvasIdErrorCallback:function(e){console.error(e.detail.errMsg)},//绘制之前canvasStart:function(event){//arrz.push(0);arrx.push(event.changedTouches[0].x);arry.push(event.changedTouches[0].y);//就算点击之后手指没有移动,那么下次要移动之前还是必定会先触发这个},//手指移动过程canvasMove:function(event){context.moveTo(arrx[arrx.length-1],arry[arrx.length-1])//arrz.push(1);arrx.push(event.changedTouches[0].x);arry.push(event.changedTouches[0].y);context.lineTo(event.changedTouches[0].x,event.changedTouches[0].y);//下面注释的为movo,linoTo方式二，清空一次画一次（上面可以不用刷新每一帧）//for(vari0;iarrx.length;i++){//if(arrz[i]0){//context.moveTo(arrx[i],arry[i])//}else{//context.lineTo(arrx[i],arry[i])//};//};//context.clearRect(0,0,canvasw,canvash);//清空上一帧context.setLineWidth(4);//设置线条的宽度context.setLineCap('round');//设置结束时点的样式context.stroke();//画线context.draw(true);//设置为true时，会保留上一次画出的图像，false则会清空(方式二设置为false,一为true)},//手指离开canvasEnd:function(event){},cleardraw:function(){//清除画布arrx[];arry[];//arrz[];context.clearRect(0,0,canvasw,canvash);context.draw(false);this.setData({cvsHeight:"100%",src:''})},//导出图片getimg:function(){if(arrx.length0){wx.showModal({title:'提示',content:'签名内容不能为空！',showCancel:false});returnfalse;};wx.showLoading({title:'签名生成中..',mask:true})letthatthis;//先拿到竖着的地址给image,挡住下面的操作!wx.canvasToTempFilePath({canvasId:'canvas',//width:canvasw,//height:canvash,//destWidth:canvasw,//destHeight:canvasw*canvasw/canvash,success:function(res){//把当前的图片放上去挡住,接着操作下面的canvasthat.setData({src:res.tempFilePath,cvsHeight:canvasw*canvasw/canvash})context.clearRect(0,0,canvasw,canvash);context.translate(0,canvasw/2.4);context.rotate(270*Math.PI/180);context.drawImage(res.tempFilePath,0,0,canvasw*canvasw/canvash,canvasw);context.draw(false,setTimeout(function(){wx.canvasToTempFilePath({canvasId:'canvas',success:result{console.log(result.tempFilePath);//全局变量,用于返回显示app.globalData.pages.cvsAutograph.autographresult.tempFilePath;wx.navigateTo({url:'../index/index'})wx.hideLoading()}},this)},100))}})},/***页面的初始数据*/data:{src:"",cvsHeight:'100%',},/***生命周期函数--监听页面加载*/onLoad:function(options){wx.showLoading({title:'加载中...',mask:true})//使用wx.createContext获取绘图上下文contextcontextwx.createCanvasContext('canvas');context.beginPath();varquerywx.createSelectorQuery();query.select('.handCenter').boundingClientRect(rect{toprect.top;leftrect.left;canvaswrect.width;canvashrect.height;wx.hideLoading()}).exec();}})