小程序实现手写板签名
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了小程序实现手写板签名的具体代码，供大家参考，具体内容如下
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
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
