小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 电脑端测试无任何问题,基本保持在2s内完成对measureText的调用
- 复现路径
对几段文字进行测试完宽度后写在画布上,实现了对文字的自动换行功能。
- 提供一个最简复现 Demo
https://developers.weixin.qq.com/s/ospmR9mV7oa0
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
意思是生产环境就没问题了对吗
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
真机调试慢不是很正常嘛。。随便个什么操作都用websocket反馈给PC上,直接预览看看呢
//思路:获取byte长度/2 再乘以每个字 font-size 的长度 等于总长度
https://www.cnblogs.com/mq0036/p/6689995.html
getBLen: function(str) {
if (str == null) return 0;
if (typeof str != "string") {
str += "";
}
return str.replace(/[^\x00-\xff]/g, "ab").length;
},
遇到跟你一样的问题,搞了一两天没有找到解决办法,我暂时没用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 = ""
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]
break
tempRow.push(tempString)
let group = tempRow[0] + '...'
arrayPart.splice(line - 1, 1, group)
rowArray = arrayPart
return rowArray
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
意思是生产环境就没问题了对吗
真机调试慢不是很正常嘛。。随便个什么操作都用websocket反馈给PC上,直接预览看看呢
//思路:获取byte长度/2 再乘以每个字 font-size 的长度 等于总长度
https://www.cnblogs.com/mq0036/p/6689995.html
getBLen: function(str) {
if (str == null) return 0;
if (typeof str != "string") {
str += "";
}
return str.replace(/[^\x00-\xff]/g, "ab").length;
},
遇到跟你一样的问题,搞了一两天没有找到解决办法,我暂时没用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
},