微信小程序如何实现签字功能

这篇文章给大家分享的是有关微信小程序如何实现签字功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专业为企业提供察哈尔右翼中旗网站建设、察哈尔右翼中旗做网站、察哈尔右翼中旗网站设计、察哈尔右翼中旗网站制作等企业网站建设、网页设计与制作、察哈尔右翼中旗企业网站模板建站服务，十余年察哈尔右翼中旗做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

效果展示

 

准备工作

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()
 },
})

感谢各位的阅读！关于“微信小程序如何实现签字功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

当前名称：微信小程序如何实现签字功能
标题URL：http://bjjierui.cn/article/ieshio.html