特意来感谢下,楼楼帮我解决了大问题
canvas动态设置高度- 当前 Bug 的表现(可附上截图) 我在js中的data里设置 height: "650px" 这个是最大的高度,而在onshow中读取图片,设置文字,这些高度都是变化的,所以我用dynamic_height来指示实际也就是最后的canvas高度,而在有些情况下,canvas的高度是650px而不是在onshow中动态设置的高度 - 预期表现 [图片] 这个是正常的图片。bug后的图片会比这个高,但是下面有一部分是空白。 我在onload中设置了这个canvas要显示什么文字,在onshow中用wx.getImageInfo获取了图片的高度,在success方法中,通过res来获取图片的高度,并得到整个图片的高度,最后用this.setdata设置高度 - 提供一个最简复现 Demo <!--这里是wxml--> [代码]<[代码][代码]canvas [代码][代码]canvas-id[代码][代码]=[代码][代码]"shareCanvas" [代码][代码]style[代码][代码]=[代码][代码]"width:400px;height:{{height}};" [代码][代码]></[代码][代码]canvas[代码][代码]>[代码] //这里是onshow函数,可以看到有dynamic_height = dynamic_height + const这种的语句,用来增加图片高度 //在onshow中我还用了fillrect来绘制一个大的矩形作为背景,其高度也是固定的 [代码]onShow: [代码][代码]function[代码] [代码]() {[代码] [代码] [代码][代码]let self = [代码][代码]this[代码][代码] [代码][代码]console.log([代码][代码]this[代码][代码].data.stuffname.length)[代码][代码] [代码][代码]wx.getImageInfo({[代码][代码] [代码][代码]src: self.data.src,[代码][代码] [代码][代码]success(res) {[代码][代码] [代码][代码]const ctx = wx.createCanvasContext([代码][代码]'shareCanvas'[代码][代码])[代码][代码] [代码][代码]const stuffnamewidth = ctx.measureText(self.data.stuffname)[代码] [代码][代码] ctx.setFillStyle('#FFFFFF') ctx.fillRect(0, 0, 400, 700) [代码] [代码][代码]ctx.setTextBaseline([代码][代码]'top'[代码][代码])[代码][代码] [代码][代码]var[代码] [代码]dynamic_height = pic_name + 17[代码][代码] [代码][代码]var[代码] [代码]stuffname = self.data.stuffname[代码][代码] [代码][代码]var[代码] [代码]chr = stuffname.split([代码][代码]""[代码][代码]);[代码][代码] [代码][代码]var[代码] [代码]temp = [代码][代码]""[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]row = [];[代码][代码] [代码][代码]ctx.setFontSize(33)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'black'[代码][代码])[代码][代码] [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]b = 0; b < row.length; b++) {[代码][代码] [代码][代码]ctx.setFontSize(33)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'black'[代码][代码])[代码][代码] [代码][代码]ctx.fillText(row[b], 20, pic_name + 10 + b * 40);[代码][代码] [代码][代码]dynamic_height = dynamic_height + 40[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]ctx.setFontSize(27)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'black'[代码][代码])[代码][代码] [代码][代码]if[代码] [代码](self.data.qq != [代码][代码]null[代码] [代码]&& self.data.qq != [代码][代码]"null"[代码] [代码]&& self.data.qq != [代码][代码]""[代码][代码]) {[代码][代码] [代码][代码]ctx.setFontSize(27)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'black'[代码][代码])[代码][代码] [代码][代码]ctx.fillText([代码][代码]"请联系QQ: "[代码] [代码]+ self.data.qq, 20, dynamic_height)[代码][代码] [代码][代码]dynamic_height = dynamic_height + 40[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](self.data.phone != [代码][代码]null[代码] [代码]&& self.data.phone != [代码][代码]"null"[代码] [代码]&& self.data.phone != [代码][代码]""[代码][代码]) {[代码][代码] [代码][代码]ctx.setFontSize(27)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'black'[代码][代码])[代码][代码] [代码][代码]ctx.fillText([代码][代码]"请联系手机:"[代码] [代码]+ self.data.phone, 20, dynamic_height)[代码][代码] [代码][代码]dynamic_height = dynamic_height + 40[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]ctx.setFontSize(17)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'gray'[代码][代码])[代码][代码] [代码][代码]ctx.fillText(self.data.time + [代码][代码]"发布"[代码][代码], 20, dynamic_height - 3)[代码][代码] [代码][代码]dynamic_height = dynamic_height + 25[代码] [代码] [代码][代码]ctx.moveTo(20, dynamic_height)[代码][代码] [代码][代码]ctx.lineTo(380, dynamic_height)[代码][代码] [代码][代码]ctx.setStrokeStyle([代码][代码]'gray'[代码][代码])[代码][代码] [代码][代码]ctx.stroke()[代码][代码] [代码][代码]dynamic_height = dynamic_height + 15[代码] [代码] [代码][代码]ctx.drawImage([代码][代码]'/icon/code.jpg'[代码][代码], 20, dynamic_height, 100, 100)[代码][代码] [代码][代码]dynamic_height += 115[代码] [代码] [代码][代码]self.setData({[代码][代码] [代码][代码]height: dynamic_height + [代码][代码]"px"[代码][代码] [代码][代码]})[代码] [代码] [代码][代码]ctx.draw([代码][代码]false[代码][代码], [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]// 3. canvas画布转成图片[代码][代码] [代码][代码]wx.canvasToTempFilePath({[代码][代码] [代码][代码]canvasId: [代码][代码]'shareCanvas'[代码][代码],[代码][代码] [代码][代码]quality: 1,[代码][代码] [代码][代码]success(res) {[代码][代码] [代码][代码]self.setData({[代码][代码] [代码][代码]filePath: res.tempFilePath,[代码][代码] [代码][代码]})[代码][代码] [代码][代码]// self.save()[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]})[代码][代码] [代码][代码]console.log(self.data.filePath)[代码] [代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码]
2020-07-03