<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
binderror="canvasIdErrorCallback"></canvas>
Page({
data: {
isBgDraw: false,
context: null,
isButtonDown: false,
lineArr: [],
canWidth: App.globalData.windowWidth,
canHeight: App.globalData.windowHeight
},
onReady() {
this.data.context = wx.createCanvasContext('canvas');
},
canvasStart(event) {
this.data.isButtonDown = true;
this.data.lineArr.push({
isStart: true,
x: event.touches[0].x,
y: event.touches[0].y
})
this.data.context.setStrokeStyle('#000000');
this.data.context.setLineWidth(4);
this.data.context.setLineCap('round');
this.data.context.setLineJoin('round');
if (this.data.isBgDraw) return;
this.data.context.setFillStyle('white')
this.data.context.fillRect(0, 0, this.data.canWidth, this.data.canHeight)
this.data.context.draw();
this.data.isBgDraw = true;
},
canvasMove(event) {
if (!this.data.isButtonDown) return;
this.data.lineArr.push({
isStart: false,
x: event.touches[0].x,
y: event.touches[0].y
})
this.data.lineArr.forEach(item => {
if (item.isStart) {
this.data.context.moveTo(item.x, item.y)
} else {
this.data.context.lineTo(item.x, item.y)
}
})
this.data.context.stroke();
this.data.context.draw(true);
},
canvasEnd(event) {
this.data.isButtonDown = false;
},
clearDraw() {
this.data.lineArr = [];
this.data.context.clearRect(0, 0, this.data.canWidth, this.data.canHeight);
this.data.context.draw(true);
this.data.isBgDraw = false;
},
getImg() {
if (this.data.lineArr.length <= 1) {
wx.showModal({
title: '提示',
content: '签名内容不能为空!',
showCancel: false
});
return false;
};
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: result => {
console.log(result.tempFilePath);
}
})
})