var content = null; var touchs = []; var canvasw = 0; var canvash = 0; var that = null; const app = getApp() Page({ /** * 页面的初始数据 */ data: { host: app.globalData.host, index:null, qianming:null, qianming1:null }, // 画布的触摸移动开始手势响应 start: function (event) { // console.log("触摸开始" + event.changedTouches[0].y) // console.log("触摸开始" + event.changedTouches[0].x) //获取触摸开始的 x,y let point = { x: event.changedTouches[0].y, y: event.changedTouches[0].x } touchs.push(point) }, // 画布的触摸移动手势响应 move: function (e) { let point = { x: e.touches[0].y, y: e.touches[0].x } touchs.push(point) if (touchs.length >= 2) { this.draw(touchs) } }, // 画布的触摸移动结束手势响应 end: function (e) { // console.log("触摸结束" + e) //清空轨迹数组 for (let i = 0; i < touchs.length; i++) { touchs.pop() } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.data.index=options.index that = this //获得Canvas的上下文 content = wx.createCanvasContext('firstCanvas') //设置线的颜色 content.setStrokeStyle("#000") //设置线的宽度 content.setLineWidth(5) //设置线两端端点样式更加圆润 content.setLineCap('round') //设置两条线连接处更加圆润 content.setLineJoin('round') }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 获取画布尺寸 var query = wx.createSelectorQuery() query.select('#canvas').boundingClientRect() query.exec(function (res) { canvasw = res[0].width; canvash = res[0].height }) }, //绘制 draw: function (touchs) { let point1 = touchs[0] let point2 = touchs[1] touchs.shift() content.moveTo(point1.y, point1.x) content.lineTo(point2.y, point2.x) content.stroke() content.draw(true) }, //清除操作 clearClick: function () { //清除画布 content.clearRect(0, 0, canvasw, canvash) content.draw(true) }, //保存图片 saveClick: function () { var that = this wx.canvasToTempFilePath({ canvasId: 'firstCanvas', success: function (res) { //打印图片路径 var path = res.tempFilePath //上传图片 that.uploadSignPic(path) console.log(path) let page = getCurrentPages(); let prevPage = page[page.length - 2]; if(that.data.index==0){ prevPage.setData({ index :0, qianming:path, }); wx.navigateBack() }else if(that.data.index==1){ prevPage.setData({ index :1, qianming1:path, }); wx.navigateBack() }else if(that.data.index==2){ prevPage.setData({ index :2, qianming:path, }); wx.navigateBack() } } }) }, /** * 上传签名图片 */ uploadSignPic: function (path) { //具体实现的业务逻辑 } })