在使用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)