收藏
回答

CanvasContext.measureText的性能是不是很低?

在使用measureText的时候,canvas的绘制非常耗时,一张简单的页面也需要10s左右,开发工具在真机上调试时会出现“API measureText加载中”之类的提示(调试环境速度很快)。是我的使用方式不对吗?有办法优化吗?


代码如下:

textProcess: function(canvas, text, width, line) {
    let chr = text.split('')
    let temp = ''
    let rowArray = []
 
    for (let i = 0; i < chr.length; i++) {
      if (canvas.measureText(temp).width + canvas.measureText(chr[i].toString()).width < width) {
        temp += chr[i]
      } else {
        i-- //这里添加了a-- 是为了防止字符丢失
        rowArray.push(temp)
        temp = ""
      }
    }
    rowArray.push(temp)
 
    if (rowArray.length > line) {
      let arrayPart = rowArray.slice(0, line)
      let row = arrayPart[line - 1]
      let tempString = ''
      let tempRow = []
      for (let i = 0; i < row.length; i++) {
        if (canvas.measureText(tempString).width + canvas.measureText(chr[i].toString()).width + canvas.measureText('...').width < width) {
          tempString += row[i]
        } else {
          break
        }
      }
      tempRow.push(tempString)
      let group = tempRow[0] + '...'
      arrayPart.splice(line - 1, 1, group)
      rowArray = arrayPart
    }
 
    return rowArray
  },


插一句使用canvas的感受:开始以为绘制图片跟截图一样简单,结果发现必须使用canvas,一个简单的图片要花几天的时间去绘制,还特别丑,一下子感觉回到了用C语言的时代。。。

回答关注问题邀请回答
收藏

4 个回答

  • 欢乐马
    欢乐马
    2020-05-04

    建议先预判一行能容纳的大概字数

    let w = parseInt(width / fontSize)
        const toRight = ellipsis ? 2 : 0
        let t = text.substr(0, w - toRight)
    // 正则是匹配英文字符,英文字符约占半个中文字符的宽度,当然这是由字体决定的
        let arr = t.match(/\w/g) || []
        let copyT = t
        while(arr.length > 2 + toRight) {
          
          copyT = text.substr(w, parseInt(arr.length / 2))
          w += parseInt(arr.length / 2)
          t+= copyT
          arr = copyT.match(/\w/g) || []
        }
        textW = context.measureText(t).width
        let stopWhile = 0
        while(textW < width && stopWhile < 500) {
          t+= text.substr(w, w + 2)
          w += 2
          textW = context.measureText(t).width
          stopWhile++
        }
    
    2020-05-04
    有用 1
    回复
  • nguyễn linh
    nguyễn linh
    发表于移动端
    2021-09-14
    内容不能为空且长度不能超过 20000 字
    2021-09-14
    有用
    回复
  • 九月有清晨
    九月有清晨
    2020-04-28

    问下这个性能差怎么优化???

    生成长图文章的时候,真机调试性能真的很差。。。

    2020-04-28
    有用
    回复 1
    • 欢乐马
      欢乐马
      2020-05-03
      让后端处理吧
      2020-05-03
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-11-14

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-11-14
    有用
    回复 10
    • 肝胃
      肝胃
      2019-11-14
      小米9 微信版本7.0.8 MIUI 11.0.3
      2019-11-14
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-11-14回复肝胃
      先参考下文档链接,按照要求来提供下代码片段
      2019-11-14
      回复
    • zhang
      zhang
      2020-03-03回复肝胃
      iphonexr 调用这个也是非常慢
      2020-03-03
      回复
    • zhang
      zhang
      2020-03-03回复肝胃
      您解决了吗?
      2020-03-03
      回复
    • zhang
      zhang
      2020-03-03
      在电脑非常快,手机上调式慢的
      2020-03-03
      回复
    查看更多(5)
登录 后发表内容
问题标签