收藏
回答

微信小程序实现多行文本溢出,iOS出现文本重叠

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS 任何 任何 任何

在微信小程序使用canvas绘制(json2canvas)多行文本(文本内容含回车换行符)时,Android正常,iOS出现文本重叠问题。有的字符串正常,例如:'我是一段文字,我会自动\n换行:有没有那么 永远不改变 拥word抱过的美\n丽 都再也不mayday破碎 让险峻岁月不能 在脸上撒野 让生\n离和死别都遥远',就没有问题,但是如果是这样的字符串就出现溢出,'我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会'

最后一次编辑于  2022-05-06
回答关注问题邀请回答
收藏

1 个回答

  • 李昊
    李昊
    2022-05-06
    function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
      // 字符分隔为数组
      const arrText = text.split('')
      let line = ''
      let lineNum = 1
    
      for (let n = 0; n < arrText.length; n++) {
        const testLine = line + arrText[n]
        const isNewLine = arrText[n] === '|'
        const metrics = ctx.measureText(testLine)
        const testWidth = metrics.width
        if ((testWidth > (maxWidth + 32) * this.$$scale && n > 0) || isNewLine) {
          ctx.fillText(line, x * this.$$scale - 16 * this.$$scale, y * this.$$scale)
          line = isNewLine ? '' : arrText[n]
          lineNum += 1
          y += lineHeight
        } else {
          line = testLine
        }
      }
      ctx.fillText(line, x * this.$$scale - 16 * this.$$scale, y * this.$$scale)
      return lineNum
    },
    
    2022-05-06
    有用
    回复
登录 后发表内容