微信小程序canvas实现签名(源码)


返回清空完成签名板


/* pages/page/cvsAutograph/cvsAutograph.wxss */
page {background: #fbfbfb;height: auto;overflow: hidden;
}
canvas {
width:100%;
/* height:100%; */
}.wrapper {width: 100%;height: 95vh;margin: 30rpx 0;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: 4rpx dashed #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;
}.handBtn button {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;
}

// canvas 全局配置
var context &＃61; null;// 使用 wx.createContext 获取绘图上下文 context
var arrx &＃61; [];//所有点的X轴集合
var arry &＃61; [];//所有点的Y轴集合
var canvasw &＃61; 0;//画布的宽
var canvash &＃61; 0;//画布的高
var top &＃61; 0;
var left &＃61; 0;
let app &＃61; getApp();
//注册页面
Page({canvasIdErrorCallback: function (e) {console.error(e.detail.errMsg)},//绘制之前canvasStart: function (event) {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])arrx.push(event.changedTouches[0].x);arry.push(event.changedTouches[0].y);context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);context.setLineWidth(4);//设置线条的宽度context.setLineCap(&＃39;round&＃39;);//设置结束时 点的样式context.stroke();//画线context.draw(true);//设置为true时&＃xff0c;会保留上一次画出的图像&＃xff0c;false则会清空},//手指离开canvasEnd: function (event) {},cleardraw: function () {//清除画布arrx &＃61; [];arry &＃61; [];// arrz &＃61; [];context.clearRect(0, 0, canvasw, canvash);context.draw(false);this.setData({cvsHeight: "100%",src:&＃39;&＃39;})},//导出图片getimg: function () {if (arrx.length &＃61;&＃61; 0) {wx.showModal({title: &＃39;提示&＃39;,content: &＃39;签名内容不能为空&＃xff01;&＃39;,showCancel: false});return false;};wx.showLoading({title: &＃39;签名生成中..&＃39;,mask:true})let that &＃61; this;//先拿到竖着的地址给image,挡住下面的操作!wx.canvasToTempFilePath({canvasId: &＃39;canvas&＃39;,// 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: &＃39;canvas&＃39;,success: result &＃61;> {console.log(result.tempFilePath);//转成base64wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, //选择图片返回的相对路径encoding: &＃39;base64&＃39;, //编码格式success: result &＃61;> { //成功的回调let base64 &＃61; result.data; }}) //全局变量,用于返回显示app.globalData.pages.cvsAutograph.autograph &＃61; result.tempFilePath;wx.navigateTo({url: &＃39;../index/index&＃39;})wx.hideLoading()}}, this)}, 100))}})},/*** 页面的初始数据*/data: {src: "",cvsHeight:&＃39;100%&＃39;,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.showLoading({title: &＃39;加载中...&＃39;,mask: true})// 使用 wx.createContext 获取绘图上下文 contextcontext &＃61; wx.createCanvasContext(&＃39;canvas&＃39;);context.beginPath();var query &＃61; wx.createSelectorQuery();query.select(&＃39;.handCenter&＃39;).boundingClientRect(rect &＃61;> {top &＃61; rect.top;left &＃61; rect.left;canvasw &＃61; rect.width;canvash &＃61; rect.height;wx.hideLoading()}).exec();}
})

转载地址&＃xff1a;https://blog.csdn.net/Arbort_/article/details/95057547#comments_14666882