canvas动态设置高度
发布于 5 年前 作者 xiulan66 14170 次浏览 来自 问答
  • 当前 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)
 
      }
    })
  },



1 回复

self.setData({

    height: dynamic_height + “px”

},()=>{

    ctx.drawxxxxxxx

})

这样可以吗

回到顶部