本文实例为大家分享了小程序实现手写板签名的具体代码，供大家参考，具体内容如下
1.wxss代码
page {
background: #F8F8F8;
}
/* 签名 */
.qianming {
background: #fff;
padding: 20rpx 30rpx;
font-size: 32rpx;
color: #333;
padding-bottom: 0;
position: fixed;
bottom: 0;
left: 0;
width: 92%;
height: 47%;
}
.qianming .clear {
font-size: 26rpx;
color: #669AF2;
}
.flex-def {
display: flex;
}
.flex-one {
flex: 1;
}
.flex-cCenter {
align-items: center;
}
/* 底部按钮 */
.bottom_btn {
font-size: 32rpx;
color: #fff;
padding: 30rpx 0;
background: #fff;
width: 100%;
}
.bottom_btn view {
width: 100%;
background: #FF083C;
border-radius: 40rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
2.wxml代码
<view class="qianming">
<view class="qianming_top flex-def flex-cCenter" wx:if="{{is_sign==1}}">
<view class="flex-one">签名</view>
<view class="clear" bindtap="clear">清空</view>
</view>
<view class="canvas">
<canvas style="width: 100%;height: 360rpx;border: 1px #eee solid;background-color: #fff;border-radius: 16rpx;margin-top: 20rpx;" canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
</view>
<view class="bottom_btn">
<view class="skin-bg-{{theme}}" bindtap='export'>我已知悉并同意</view>
</view>
</view>
3.js代码
data: {
context: null,
imgUrl: "",
index:0,//用来判断是否签名
},
/**记录开始点 */
bindtouchstart: function (e) {
this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
// 记录已经开始签名
this.setData({
index:1
})
},
/**记录移动点，刷新绘制 */
bindtouchmove: function (e) {
this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
this.data.context.stroke();
this.data.context.draw(true);
this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
// 记录已经开始签名
this.setData({
index:1
})
},
/**清空画布 */
clear: function () {
this.data.context.draw();
this.setData({
index:0
})
},
/**导出图片 点击确定按钮*/
export: function () {
const that = this;
if (that.data.index==0) {
wx.showToast({
title: '请阅读并签名',
icon: 'none',
duration: 2000
})
return
}
that.data.context.draw(true,
wx.canvasToTempFilePath({
x: 0,
y: 0,
fileType: 'png',
canvasId: 'firstCanvas',
success(res) {
that.upload_image(res.tempFilePath)
},
fail() {
wx.showToast({
title: '签名失败',
icon: 'none',
duration: 2000
})
}
})
)
}
},
// 将图片保存到服务器
upload_image(imgurl) {
var that = this;
},
4.注意json文件必须加这个参数为true，否则签名时晃动
{
"disableScroll": true
}
