微信小程序Canvas绘制表格，退出重进继续绘制内容 - 小程序开发教程 - 常规

{/'title/':/'微信小程序Canvas绘制表格，退出重进继续绘制内容 - 小程序开发教程/',/'description/':/'本文介绍如何在微信小程序中使用Canvas绘制表格，并实现退出页面后再次进入页面可以继续上次绘制内容的功能。/',/'keywords/':/'微信小程序, Canvas, 绘制表格, 退出重进, 继续绘制, 小程序开发教程/',/'content/':/'const app = getApp()//n//nPage({//n data: {//n disabled: false,//n canvasId: 'myCanvas',//n clickCount: 0,//n maxClickCount: 11,//n tableData:[],//n bh:'',//n mc:'',//n zt:'',//n dw:'',//n date: '',//n arr1:'',//n arr2:'',//n array1:['新鲜', '腐烂','干燥', '潮湿', '包装完好','包装破损'],//n array2:['重金属GB5009.15等','农残GB23200.113等','农残NY/T 761等'],//n index:0,//n sum:0,//n row:[],//n y:140,//n rows: [] // 用于保存绘制内容的数组//n },//n//n bindPickerChange1: function (e) {//n const index = e.detail.value;//n let array1 = this.data.array1;//n this.setData({//n index,//n arr1: array1[index]//n });//n },//n//n bindPickerChange2: function (e) {//n const sum = e.detail.value;//n let array2 = this.data.array2;//n this.setData({//n sum,//n arr2: array2[sum]//n });//n },//n//n bindDateChange: function(event) {//n this.setData({//n date: event.detail.value//n });//n },//n//n inputbh(event){//n this.setData({//n bh:event.detail.value//n });//n },//n//n inputmc(event){//n this.setData({//n mc:event.detail.value//n });//n },//n//n inputzt(event){//n this.setData({//n zt:event.detail.value//n });//n },//n//n inputdw(event){//n this.setData({//n dw:event.detail.value//n });//n },//n//n onReady() {//n const ctx = wx.createCanvasContext('myCanvas');//n this.ctx = ctx;//n const savedRows = wx.getStorageSync('rows'); // 获取之前绘制的内容//n if (savedRows) {//n this.setData({ rows: savedRows }); // 更新rows数组//n }//n this.drawTable();//n },//n//n drawTable() {//n const { bh, mc, arr1, dw, date, arr2, zt} = this.data;//n//n // 清空画布//n this.ctx.fillStyle = '#FFFFFF'//n this.ctx.clearRect(0, 0, 1200, 848);//n this.ctx.fillRect(0, 0, 1200, 848);//n//n // 设置字体样式//n this.ctx.fillStyle = '#000';//n this.ctx.setTextAlign('center');//n this.ctx.setTextBaseline('middle');//n//n let y = this.data.y || 100 ;//n//n this.ctx.font = /'bold 30px 黑体/';//n this.ctx.fillText('样品登记表', 640, 90);//n//n this.ctx.font = /'black 15px Times New Roman/';//n this.ctx.fillText('GHNJ/TR-26', 160, 110);//n this.ctx.fillText('第页共页', 990, 110);//n//n const points = [//n { x: 60 , y: 130, width: 90, text: '样品编号' },//n { x: 150, y: 130, width: 70, text: '样品名称' },//n { x: 220, y: 130, width: 55, text: '样品状态' },//n { x: 275, y: 130, width: 90, text: '抽样编号' },//n { x: 365, y: 130, width: 210, text: '被检单位' },//n { x: 575, y: 130, width: 70, text: '收样日期' },//n { x: 645, y: 130, width: 65, text: '样品数量' },//n { x: 710, y: 130, width: 120, text: '检查项目及依据' },//n { x: 830, y: 130, width: 60, text: '送样人' },//n { x: 890, y: 130, width: 60, text: '接样人' },//n { x: 950, y: 130, width: 80, text: '结果返回日期' },//n { x: 1030, y: 130, width: 65, text: '报告编号' },//n { x: 1095, y: 130, width: 65, text: '备注' }//n ];//n//n for (let i = 0; i < points.length; i++) {//n const point = points[i];//n const text = point.text;//n this.ctx.font = /'black 13px 宋体/';//n this.ctx.strokeRect(point.x, point.y, point.width, 60);//n this.ctx.fillText(text, point.x + point.width / 2, point.y + 30);//n }//n//n const newRow = [//n { x: 60, y, width: 90, text: /'G-2023-/'+bh },//n { x: 150, y, width: 70, text: mc },//n { x: 220, y, width: 55, text: arr1 },//n { x: 275, y, width: 90, text: '' },//n { x: 365, y, width: 210, text: dw },//n { x: 575, y, width: 70, text: date },//n { x: 645, y, width: 65, text: '3 Kg' },//n { x: 710, y, width: 120, text: arr2 },//n { x: 830, y, width: 60, text: '' },//n { x: 890, y, width: 60, text: zt },//n { x: 950, y, width: 80, text: '' },//n { x: 1030, y, width: 65, text: '' },//n { x: 1095, y, width: 65, text: '' }//n ];//n//n this.setData({ rows: [...this.data.rows, newRow] });//n//n for (let i = 1; i < this.data.rows.length; i++) {//n const row = this.data.rows[i];//n for (let j = 0; j < row.length; j++) {//n const point = row[j];//n const text = point.text;//n this.ctx.font = /'black 12px 行书/';//n this.ctx.strokeRect(point.x, point.y, point.width, 50);//n this.ctx.fillText(text, point.x + point.width / 2, point.y + 25);//n }//n }//n//n y += 50//n this.setData({y});//n this.ctx.draw();//n//n // 限制提交次数//n if (this.data.clickCount < this.data.maxClickCount) {//n this.setData({//n clickCount: this.data.clickCount + 1//n });//n }//n//n if (this.data.clickCount === this.data.maxClickCount) {//n this.setData({//n disabled: true//n });//n wx.showToast({//n title: '本页已满，请保存数据',//n icon: 'none',//n duration: 2000//n });//n }//n },//n//n saveImg() {//n wx.canvasToTempFilePath({//n x: 0,//n y: 0,//n width: 1200,//n height: 848,//n canvasId: 'myCanvas',//n success: (res) => {//n // 将临时文件路径保存到手机本地//n wx.saveImageToPhotosAlbum({//n filePath: res.tempFilePath,//n success: () => {//n // 在这里可以处理保存成功的逻辑//n wx.showToast({//n title: '保存成功,请点击下一页',//n icon: 'none',//n duration: 2000//n });//n },//n fail: (err) => {//n // 在这里可以处理保存失败的逻辑//n console.error(err);//n }//n });//n },//n fail: (err) => {//n // 在这里可以处理生成图片失败的逻辑//n console.error(err);//n }//n });//n },//n//n refreshPage: function () {//n wx.showModal({//n title: '提示',//n content: '请确认是否已保存当前数据',//n success(res) {//n if (res.confirm) {//n wx.reLaunch({//n url: '/pages/jiance/jiance'//n })//n } else if (res.cancel) {//n console.log('用户点击取消')//n }//n }//n })//n },//n })//n微信小程序canvas绘制图片退出重进后继续上次绘制内容内容：可以通过在页面的onLoad生命周期函数中获取之前绘制的数据，并在onReady生命周期函数中重新绘制。具体步骤如下：//n//n1. 在data中添加一个用于保存绘制内容的数组rows：rows: []。//n//n2. 在onReady生命周期函数中，先清空画布，然后根据rows数组中保存的内容重新绘制。具体步骤如下：//n//n - 清空画布：使用this.ctx.clearRect(0, 0, 1200, 848)方法清空画布。//n//n - 绘制表格：根据rows数组中保存的内容，使用循环绘制表格的每一行。//n//n - 更新y坐标：在绘制每一行后，更新y坐标的值。//n//n - 绘制完成后调用this.ctx.draw()方法进行绘制。//n//n3. 在保存图片时，将绘制内容保存到rows数组中，以便下次进入页面时可以重新绘制。//n//n - 在drawTable方法中，将新绘制的内容添加到rows数组中：this.setData({ rows: [...this.data.rows, newRow] })。//n//n4. 在onLoad生命周期函数中，获取之前绘制的内容，如果存在则更新rows数组，并在onReady生命周期函数中重新绘制。//n//n - 在onLoad生命周期函数中，获取之前绘制的内容，并更新rows数组：this.setData({ rows: savedRows })。//n//n - 在onReady生命周期函数中，根据rows数组的内容重新绘制。//n//n完整代码如下：//n//n```javascript//nconst app = getApp()//n//nPage({//n data: {//n disabled: false,//n canvasId: 'myCanvas',//n clickCount: 0,//n maxClickCount: 11,//n tableData:[],//n bh:'',//n mc:'',//n zt:'',//n dw:'',//n date: '',//n arr1:'',//n arr2:'',//n array1:['新鲜', '腐烂','干燥', '潮湿', '包装完好','包装破损'],//n array2:['重金属GB5009.15等','农残GB23200.113等','农残NY/T 761等'],//n index:0,//n sum:0,//n row:[],//n y:140,//n rows: [] // 用于保存绘制内容的数组//n },//n//n bindPickerChange1: function (e) {//n const index = e.detail.value;//n let array1 = this.data.array1;//n this.setData({//n index,//n arr1: array1[index]//n });//n },//n//n bindPickerChange2: function (e) {//n const sum = e.detail.value;//n let array2 = this.data.array2;//n this.setData({//n sum,//n arr2: array2[sum]//n });//n },//n//n bindDateChange: function(event) {//n this.setData({//n date: event.detail.value//n });//n },//n//n inputbh(event){//n this.setData({//n bh:event.detail.value//n });//n },//n//n inputmc(event){//n this.setData({//n mc:event.detail.value//n });//n },//n//n inputzt(event){//n this.setData({//n zt:event.detail.value//n });//n },//n//n inputdw(event){//n this.setData({//n dw:event.detail.value//n });//n },//n//n onReady() {//n const ctx = wx.createCanvasContext('myCanvas');//n this.ctx = ctx;//n const savedRows = wx.getStorageSync('rows'); // 获取之前绘制的内容//n if (savedRows) {//n this.setData({ rows: savedRows }); // 更新rows数组//n }//n this.drawTable();//n },//n//n drawTable() {//n const { bh, mc, arr1, dw, date, arr2, zt} = this.data;//n//n // 清空画布//n this.ctx.fillStyle = '#FFFFFF'//n this.ctx.clearRect(0, 0, 1200, 848);//n this.ctx.fillRect(0, 0, 1200, 848);//n//n // 设置字体样式//n this.ctx.fillStyle = '#000';//n this.ctx.setTextAlign('center');//n this.ctx.setTextBaseline('middle');//n//n let y = this.data.y || 100 ;//n//n this.ctx.font = /'bold 30px 黑体/';//n this.ctx.fillText('样品登记表', 640, 90);//n//n this.ctx.font = /'black 15px Times New Roman/';//n this.ctx.fillText('GHNJ/TR-26', 160, 110);//n this.ctx.fillText('第页共页', 990, 110);//n//n const points = [//n { x: 60 , y: 130, width: 90, text: '样品编号' },//n { x: 150, y: 130, width: 70, text: '样品名称' },//n { x: 220, y: 130, width: 55, text: '样品状态' },//n { x: 275, y: 130, width: 90, text: '抽样编号' },//n { x: 365, y: 130, width: 210, text: '被检单位' },//n { x: 575, y: 130, width: 70, text: '收样日期' },//n { x: 645, y: 130, width: 65, text: '样品数量' },//n { x: 710, y: 130, width: 120, text: '检查项目及依据' },//n { x: 830, y: 130, width: 60, text: '送样人' },//n { x: 890, y: 130, width: 60, text: '接样人' },//n { x: 950, y: 130, width: 80, text: '结果返回日期' },//n { x: 1030, y: 130, width: 65, text: '报告编号' },//n { x: 1095, y: 130, width: 65, text: '备注' }//n ];//n//n for (let i = 0; i < points.length; i++) {//n const point = points[i];//n const text = point.text;//n this.ctx.font = /'black 13px 宋体/';//n this.ctx.strokeRect(point.x, point.y, point.width, 60);//n this.ctx.fillText(text, point.x + point.width / 2, point.y + 30);//n }//n//n const newRow = [//n { x: 60, y, width: 90, text: /'G-2023-/'+bh },//n { x: 150, y, width: 70, text: mc },//n { x: 220, y, width: 55, text: arr1 },//n { x: 275, y, width: 90, text: '' },//n { x: 365, y, width: 210, text: dw },//n { x: 575, y, width: 70, text: date },//n { x: 645, y, width: 65, text: '3 Kg' },//n { x: 710, y, width: 120, text: arr2 },//n { x: 830, y, width: 60, text: '' },//n { x: 890, y, width: 60, text: zt },//n { x: 950, y, width: 80, text: '' },//n { x: 1030, y, width: 65, text: '' },//n { x: 1095, y, width: 65, text: '' }//n ];//n//n this.setData({ rows: [...this.data.rows, newRow] });//n//n for (let i = 1; i < this.data.rows.length; i++) {//n const row = this.data.rows[i];//n for (let j = 0; j < row.length; j++) {//n const point = row[j];//n const text = point.text;//n this.ctx.font = /'black 12px 行书/';//n this.ctx.strokeRect(point.x, point.y, point.width, 50);//n this.ctx.fillText(text, point.x + point.width / 2, point.y + 25);//n }//n }//n//n y += 50//n this.setData({y});//n this.ctx.draw();//n//n // 限制提交次数//n if (this.data.clickCount < this.data.maxClickCount) {//n this.setData({//n clickCount: this.data.clickCount + 1//n });//n }//n//n if (this.data.clickCount === this.data.maxClickCount) {//n this.setData({//n disabled: true//n });//n wx.showToast({//n title: '本页已满，请保存数据',//n icon: 'none',//n duration: 2000//n });//n }//n },//n//n saveImg() {//n wx.canvasToTempFilePath({//n x: 0,//n y: 0,//n width: 1200,//n height: 848,//n canvasId: 'myCanvas',//n success: (res) => {//n // 将临时文件路径保存到手机本地//n wx.saveImageToPhotosAlbum({//n filePath: res.tempFilePath,//n success: () => {//n // 在这里可以处理保存成功的逻辑//n wx.showToast({//n title: '保存成功,请点击下一页',//n icon: 'none',//n duration: 2000//n });//n },//n fail: (err) => {//n // 在这里可以处理保存失败的逻辑//n console.error(err);//n }//n });//n },//n fail: (err) => {//n // 在这里可以处理生成图片失败的逻辑//n console.error(err);//n }//n });//n },//n//n refreshPage: function () {//n wx.showModal({//n title: '提示',//n content: '请确认是否已保存当前数据',//n success(res) {//n if (res.confirm) {//n wx.reLaunch({//n url: '/pages/jiance/jiance'//n })//n } else if (res.cancel) {//n console.log('用户点击取消')//n }//n }//n })//n },//n })//n/