/**
* 文字自动换行
* @param {Object} ctx 画布的上下文环境
* @param {Object} content 需要绘制的文本内容
* @param {Object} drawX 绘制文本的x坐标
* @param {Object} drawY 绘制文本的y坐标
* @param {Object} lineHeight 文本之间的行高
* @param {Object} lineMaxWidth 每行文本的最大宽度
* @param {Object} lineNum 最多绘制的行数
*/
export default function useTextPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum, isTitle = false) {
var drawTxt = ''; // 当前绘制的内容
var drawLine = 1; // 第几行开始绘制
var drawIndex = 0; // 当前绘制内容的索引
//匹配这些中文标 。 ？ ！ ， 、 ； ： ” ' ） 》 〉 】 』 」 〕 … ￥
let 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, i), 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
};
}
1. 返回的y是已绘制的y轴的位置，可以用此变量计算下面的内容的绘制起始位置。
2. 遇到正则包括的标点如果在一行的开头绘制，会将标点拿到上一行的末尾，以此达到标点不开头的效果。
3. 支持回车换行