在微信小程序使用canvas绘制(json2canvas)多行文本(文本内容含回车换行符)时,Android正常,iOS出现文本重叠问题。有的字符串正常,例如:'我是一段文字,我会自动\n换行:有没有那么 永远不改变 拥word抱过的美\n丽 都再也不mayday破碎 让险峻岁月不能 在脸上撒野 让生\n离和死别都遥远',就没有问题,但是如果是这样的字符串就出现溢出,'我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会\n我是一段文字,我会'
function wrapText(ctx, text, x, y, maxWidth, lineHeight) { // 字符分隔为数组 const arrText = text.split('') let line = '' let lineNum = 1 for (let n = 0; n < arrText.length; n++) { const testLine = line + arrText[n] const isNewLine = arrText[n] === '|' const metrics = ctx.measureText(testLine) const testWidth = metrics.width if ((testWidth > (maxWidth + 32) * this.$$scale && n > 0) || isNewLine) { ctx.fillText(line, x * this.$$scale - 16 * this.$$scale, y * this.$$scale) line = isNewLine ? '' : arrText[n] lineNum += 1 y += lineHeight } else { line = testLine } } ctx.fillText(line, x * this.$$scale - 16 * this.$$scale, y * this.$$scale) return lineNum },