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

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

效果展示

准备工作

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

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