您现在的位置是:网站首页> 编程资料编程资料

小程序实现手写板签名_javascript技巧_

2023-05-24 334人已围观

简介 小程序实现手写板签名_javascript技巧_

本文实例为大家分享了小程序实现手写板签名的具体代码,供大家参考,具体内容如下

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代码

              签名         清空                                      我已知悉并同意     

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 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网