您现在的位置是:网站首页> 编程资料编程资料
小程序实现手写板签名_javascript技巧_
2023-05-24
335人已围观
简介 小程序实现手写板签名_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 }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 微信小程序实现手写板_javascript技巧_
- 微信小程序自定义Modal弹框_javascript技巧_
- 微信小程序自定义Dialog弹框_javascript技巧_
- JavaScript取消请求方法_JavaScript_
- React SSR 中的限流案例详解_React_
- 微信小程序实现日期范围选择_javascript技巧_
- Web Components实现类Element UI中的Card卡片_JavaScript_
- 关于JavaScript使用export和import的两个报错解决_javascript技巧_
- vue项目中 jsconfig.json概念及使用步骤_vue.js_
- Yarn与Lerna管理monorepo使用详解_vue.js_
