微信小程序如何實(shí)現(xiàn)簽字功能

這篇文章給大家分享的是有關(guān)微信小程序如何實(shí)現(xiàn)簽字功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

效果展示

準(zhǔn)備工作

1.canvas的使用

主要用到了 bindtouchstart ， bindtouchmove 兩個(gè)屬性，捕捉手指移動(dòng)的同時(shí)，將移動(dòng)前的坐標(biāo)和移動(dòng)后的坐標(biāo)用canvas的畫圖api繪制出來

2.wx.createCanvasContext

這個(gè)api用于創(chuàng)建并獲取指定canvas對(duì)象

代碼說明

在wxml中聲明一個(gè)canvas

指定canvas-id和觸摸開始和移動(dòng)函數(shù)

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

給手指觸摸綁定函數(shù)

// 開始觸摸
bindtouchstart: function(e) {
 console.log("bindtouchstart", e);
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
 },
 
// 觸摸移動(dòng)
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: ""
 },
 /**記錄開始點(diǎn) */
 bindtouchstart: function(e) {
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
 },
 /**記錄移動(dòng)點(diǎn)，刷新繪制 */
 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();
 },
 /**導(dǎo)出圖片 */
 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: '導(dǎo)出失敗',
   icon: 'none',
   duration: 2000
  })
  }
 }))
 },
 onShow: function() {
 const context = wx.createCanvasContext('firstCanvas')
 this.setData({
  context: context
 })
 context.draw()
 },
})

感謝各位的閱讀！關(guān)于“微信小程序如何實(shí)現(xiàn)簽字功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！