小程序有关手写板签名具体代码

来源: https://www.ucloud.cn/yun/130353.html 作者: 3403771864 发布日期: 发布于2023-03-26 17:27

本文主要为大家讲述在小程序中实现手写板签名的具体代码，下面看看具体内容：

　　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
　　}

　　全部内容已全部讲述完毕，欢迎关注后续更多精彩内容。