/** * 文字自动换行 * @param {Object} ctx 画布的上下文环境 * @param {Object} content 需要绘制的文本内容 * @param {Object} drawX 绘制文本的x坐标 * @param {Object} drawY 绘制文本的y坐标 * @param {Object} lineHeight 文本之间的行高 * @param {Object} lineMaxWidth 每行文本的最大宽度 * @param {Object} lineNum 最多绘制的行数 */ export function useTextPrewrap(ctx: any, content: string, drawX: number, drawY: number, lineHeight: number, lineMaxWidth: number, lineNum: number) { var drawTxt = '' // 当前绘制的内容 var drawLine = 1 // 第几行开始绘制 var drawIndex = 0 // 当前绘制内容的索引 // 匹配这些中文标 。 ? ! , 、 ; : ” ' ) 》 〉 】 』 」 〕 … ¥ const reg = /[\u3002|\uFF1F|\uFF01|\uFF0C|\u3001|\uFF1B|\uFF1A|\u201D|\u2019|\uFF09|\u300B|\u3009|\u3011|\u300F|\u300D|\u3015|\u2026|\uFFE5]/ // 判断内容是否可以一行绘制完毕 if (ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex), drawX, drawY) } else { for (var i = 0; i < content.length; i++) { drawTxt += content[i] if (content[i] === '\n') { ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY) drawIndex = i + 1 drawLine += 1 drawY += lineHeight drawTxt = '' if (drawLine >= lineNum) { break } else { continue } } if (ctx.measureText(drawTxt).width >= lineMaxWidth && !reg.test(content[i + 1]) && i !== content.length - 1) { if (drawLine >= lineNum) { ctx.fillText(`${content.substring(drawIndex, i)}..`, drawX, drawY) break } else { ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY) drawIndex = i + 1 if (content[i + 1] !== '\n') { drawLine += 1 drawY += lineHeight } drawTxt = '' } // drawLine -= 1; } else { // 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidth if (i === content.length - 1) { ctx.fillText(content.substring(drawIndex), drawX, drawY) } } } } return { x: drawX, y: drawY, } }