CanvasContext.measureText的性能是不是很低？
发布于 7 年前 作者 yongbai 2269 次浏览 来自 官方Issues

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

1 回复

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

回到顶部