微信小程序签字签名实现

效果展示

准备工作

  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 style="margin: 0 15rpx;width: 720rpx;height: 720rpx;border: 1px #333 solid;background-color: #fff;" 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 style="width:360rpx;height:360rpx;margin: 10rpx 0;" 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()

},

})

以上是 微信小程序签字签名实现 的全部内容, 来源链接: utcz.com/a/16679.html

回到顶部