对于手写签名组件组件晚上有很多种写法，我选择了一种进行了wepy的框架的改造。如果使用wepy框架做手写签名的话可以直接复制下面的代码。

这里需要提醒的是：安卓手机和苹果手机有适配性的问题，苹果手机在签名的以后手机将无法进行文档的上下左右的滑动，而安卓手机没有影响。解决这个问题的方法是给canvas给disable-scroll属性绑定一个变量 disable-scroll="true" 当进行滑动的时候讲disable-scroll属性设置成true,滑动完成时将属性还原为false.

清除

保存图片

import wepy from 'wepy';

var content = null;

var touchs = [];

var canvasw = 0;

var canvash = 0;

export default class Index extends wepy.page {

config = {};

components = {};

data = {

signImage: '',

};

events = {};

methods = {

start: function(event) {

// console.log("触摸开始" + event.changedTouches[0].x)

// console.log("触摸开始" + event.changedTouches[0].y)

//获取触摸开始的 x,y

let point = {

x: event.changedTouches[0].x,

y: event.changedTouches[0].y

}

touchs.push(point)

},

// 画布的触摸移动手势响应

move: function(e) {

let point = {

x: e.touches[0].x,

y: e.touches[0].y

}

touchs.push(point)

if (touchs.length >= 2) {

this.draw(touchs)

}

},

// 画布的触摸取消响应

cancel: function(e) {

console.log("触摸取消" + e)

},

// 画布的长按手势响应

tap: function(e) {

console.log("长按手势" + e)

},

error: function(e) {

console.log("画布触摸错误" + e)

},

// 画布的触摸移动结束手势响应

end: function(e) {

console.log("触摸结束" + e)

//清空轨迹数组

for (let i = 0; i < touchs.length; i++) {

touchs.pop()

}

},

};

async onShow() {}

async onLoad(options) {

//获得Canvas的上下文

content = wx.createCanvasContext('firstCanvas')

//设置线的颜色

content.setStrokeStyle("#00ff00")

//设置线的宽度

content.setLineWidth(5)

//设置线两端端点样式更加圆润

content.setLineCap('round')

//设置两条线连接处更加圆润

content.setLineJoin('round')

}

draw(touchs) {

let point1 = touchs[0]

let point2 = touchs[1]

touchs.shift()

content.moveTo(point1.x, point1.y)

content.lineTo(point2.x, point2.y)

content.stroke()

content.draw(true)

}

clearClick() {

//清除画布

content.clearRect(0, 0, canvasw, canvash)

content.draw(true)

}

saveClick() {

var that = this

wx.canvasToTempFilePath({

canvasId: 'firstCanvas',

success: function(res) {

//打印图片路径

console.log(res.tempFilePath)

//设置保存的图片

that.setData({

signImage: res.tempFilePath

})

}

})

}

}

.content {

width: 100%;

height: 500px;

background-color: red;

}

.firstCanvas {

background-color: blue;

width: 100%;

height: 200px;

}

image {

width: 100%;

height: 200px;

background-color: orange;

}