微信小程序如何实现签字功能
这篇文章给大家分享的是有关微信小程序如何实现签字功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联专业为企业提供察哈尔右翼中旗网站建设、察哈尔右翼中旗做网站、察哈尔右翼中旗网站设计、察哈尔右翼中旗网站制作等企业网站建设、网页设计与制作、察哈尔右翼中旗企业网站模板建站服务,十余年察哈尔右翼中旗做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
效果展示
准备工作
1.canvas的使用
主要用到了 bindtouchstart , bindtouchmove 两个属性,捕捉手指移动的同时,将移动前的坐标和移动后的坐标用canvas的画图api绘制出来
2.wx.createCanvasContext
这个api用于创建并获取指定canvas对象
代码说明
在wxml中声明一个canvas
指定canvas-id和触摸开始和移动函数
初始化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
清除 提交
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() }, })
感谢各位的阅读!关于“微信小程序如何实现签字功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页标题:微信小程序如何实现签字功能
文章路径:http://scyanting.com/article/ieshio.html