华为p30使用canvas画文本时,画出的文本上有白色的字覆盖在文本上。
发布于 7 年前 作者 zhoutao 3857 次浏览 来自 官方Issues
draw_new(backbg, avatar, qrcode) {
    const scale = 3
    // 画背景图
    let x0 = 0;
    let y0 = 0;
    let width0 = WIDTH,
      height0 = HEIGHT;
    context.drawImage(backbg, x0, y0, width0, height0);
    context.closePath()
    context.restore()
    // 画口令文本
    var wordName = this.sendRecord.wordName // 43
    let wordX = 138 * scale
    let wordY = 161 * scale
    let tRow = 1
    let tFont = 25 * scale
    if (wordName.length > 12 && wordName.length <= 26) {
      wordY = 151 * scale
      tRow = 2
      tFont = 20 * scale
    } else if (wordName.length >= 27) {
      wordY = 139.5 * scale
      tRow = 3
      tFont = 20 * scale
    }
    let tW = context.measureText(wordName).width
    tW = tW > 260 * scale ? 260 * scale : tW
    // let wordNameList = this.sendRecord.wordName.match(/[\s\S]{1,16}/g) || [];

    _util.handleLimitRowText(context, wordX, wordY, '#d2433b', tFont, wordName, 260 * scale, WIDTH, 3, 'center', true)
    var nickName = _this.data.sendRecord.nickName
    if (nickName.length > 12) {
      nickName = nickName.slice(0, 12) + '...'
    }
    nickName = nickName + '的语音红包' // 43
    let nW = context.measureText(nickName).width
    nW = nW > 260 * scale ? 260 * scale : nW
    let nX = (WIDTH - nW) * 0.5
    context.beginPath()
    context.setLineCap('round')
    context.setLineWidth(30 * scale)
    context.globalAlpha = 0.05;
    var liNw = context.measureText(nickName).width
    context.moveTo(WIDTH / 2 - nW / 2, (327.5 + 15) * scale)
    context.lineTo(WIDTH / 2 + nW / 2, (327.5 + 15) * scale)
    context.stroke()
    context.globalAlpha = 1;
    _util.handleLimitRowText(context, nX, 336.5 * scale, '#fbe8bd', 15 * scale, nickName, 260 * scale, WIDTH, 1, 'center', false)
    // 画头像
    let x1 = 147.5 * scale;
    let y1 = 232.5 * scale;
    let width1 = 80 * scale,
      height1 = 80 * scale;
    context.save()
    context.beginPath()
    context.arc(x1 + width1 * 0.5, y1 + height1 * 0.5, width1 * 0.5, 0, 2 * Math.PI)
    context.setStrokeStyle('transparent')
    context.stroke()
    context.clip()
    context.drawImage(avatar, x1, y1, width1, height1);
    context.closePath()
    context.restore()

    // 二维码
    let x6 = 150 * scale;
    let y6 = 464.5 * scale;
    let width6 = 75 * scale,
      height6 = 75 * scale;
    context.save()
    context.beginPath()
    context.drawImage(qrcode, (WIDTH - width6) * 0.5, y6, width6, height6);
    context.closePath()
    context.restore()
    context.draw(true, () => {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        destWidth: WIDTH,
        destHeight: HEIGHT,
        canvasId: 'myCanvas',
        success: (res) => {
          wx.hideLoading()
          this.setData({
            image: res.tempFilePath,
            show_canvas_box: true
          })
        }
      })
    })
  },

1 回复

请具体描述问题出现的流程,并提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

扫码提供下扫码结果截图



回到顶部