这篇文章给大家分享的是有关微信小程序如何实现签字功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联专业为企业提供察哈尔右翼中旗网站建设、察哈尔右翼中旗做网站、察哈尔右翼中旗网站设计、察哈尔右翼中旗网站制作等企业网站建设、网页设计与制作、察哈尔右翼中旗企业网站模板建站服务,十余年察哈尔右翼中旗做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
效果展示
准备工作
1.canvas的使用
主要用到了 bindtouchstart , bindtouchmove 两个属性,捕捉手指移动的同时,将移动前的坐标和移动后的坐标用canvas的画图api绘制出来
2.wx.createCanvasContext
这个api用于创建并获取指定canvas对象
代码说明
在wxml中声明一个canvas
指定canvas-id和触摸开始和移动函数
<canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
初始化canvas
onShow: function() { const context = wx.createCanvasContext('firstCanvas') this.setData({ context: context }) context.draw() },
给手指触摸绑定函数
// 开始触摸 bindtouchstart: function(e) { console.log("bindtouchstart", e); this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) }, // 触摸移动 bindtouchmove: function(e) { console.log("bindtouchstart", 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); },
具体代码
index.wxml
<view class="container"> <canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas> <view class="btn"> <view bindtap='clear' class="clear"> 清除 </view> <view bindtap='export' class="submit"> 提交 </view> </view> <image mode="aspectFill" src="{{imgUrl}}"></image> </view>
index.js
Page({ data: { context: null, imgUrl: "" }, /**记录开始点 */ bindtouchstart: function(e) { this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) }, /**记录移动点,刷新绘制 */ 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); }, /**清空画布 */ clear: function() { this.data.context.draw(); }, /**导出图片 */ export: function() { const that = this; this.data.context.draw(false, wx.canvasToTempFilePath({ x: 0, y: 0, fileType: 'jpg', canvasId: 'firstCanvas', success(res) { const { tempFilePath } = res; that.setData({ imgUrl: tempFilePath, }) }, fail() { wx.showToast({ title: '导出失败', icon: 'none', duration: 2000 }) } })) }, onShow: function() { const context = wx.createCanvasContext('firstCanvas') this.setData({ context: context }) context.draw() }, })
感谢各位的阅读!关于“微信小程序如何实现签字功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前题目:微信小程序如何实现签字功能
链接分享:https://www.cdcxhl.com/article0/ieshio.html
成都网站建设公司_创新互联,为您提供网站改版、外贸网站建设、静态网站、网站制作、域名注册、网站设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联