- 当前 Bug 的表现(可附上截图)
我在js中的data里设置 height: "650px" 这个是最大的高度,而在onshow中读取图片,设置文字,这些高度都是变化的,所以我用dynamic_height来指示实际也就是最后的canvas高度,而在有些情况下,canvas的高度是650px而不是在onshow中动态设置的高度
- 预期表现
这个是正常的图片。bug后的图片会比这个高,但是下面有一部分是空白。
我在onload中设置了这个canvas要显示什么文字,在onshow中用wx.getImageInfo获取了图片的高度,在success方法中,通过res来获取图片的高度,并得到整个图片的高度,最后用this.setdata设置高度
- 提供一个最简复现 Demo
<!--这里是wxml-->
|
//这里是onshow函数,可以看到有dynamic_height = dynamic_height + const这种的语句,用来增加图片高度 //在onshow中我还用了fillrect来绘制一个大的矩形作为背景,其高度也是固定的
let self = this console.log( this .data.stuffname.length) wx.getImageInfo({ src: self.data.src, success(res) { const ctx = wx.createCanvasContext( 'shareCanvas' )
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) } }) }, |
self.setData({
height: dynamic_height +
"px"
},()=>{
ctx.drawxxxxxxx
})
这样可以吗
好使了!好使了!!!太感谢了!!!
原来setdata还有回调函数,太神奇了。。。
瞧你激动的!
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#pageprototypesetdataobject-data-function-callback
仔细看看文档~
我以后一定仔细看文档😭
特意来感谢下,楼楼帮我解决了大问题