在使用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语言的时代。。。
建议先预判一行能容纳的大概字数
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++ }问下这个性能差怎么优化？？？
生成长图文章的时候，真机调试性能真的很差。。。
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）