收藏
回答

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语言的时代。。。

最后一次编辑于  11-14
回答关注问题邀请回答
收藏

1 个回答

问题标签