本文实例为大家分享了小程序实现手写板签名的具体代码,供大家参考,具体内容如下 1.wxss代码 page { background: #F8F8F8;}/* 签名 */.qianming { background: #fff; padding: 20rpx 30rpx;
本文实例为大家分享了小程序实现手写板签名的具体代码,供大家参考,具体内容如下
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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自由互联。