uniapp canvas文字换行和省略号

前端小凯

已于 2024-04-06 16:29:36 修改

阅读量501

点赞数 4

文章标签： uni-app javascript 前端

于 2024-03-17 21:39:36 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/136790859

版权

该篇文章详细解释了在HTML5canvas中如何使用textPrewrap方法进行文本绘制，当文本内容超过指定最大宽度时，如何分行并保持行高的一段JavaScript代码实现。

摘要由CSDN通过智能技术生成

canvas中调用这个方法：

/**
ctx： 画布的上下文环境
content： 需要绘制的文本内容
drawX： 绘制文本的x坐标
drawY： 绘制文本的y坐标
lineHeight：文本之间的行高
lineMaxWidth：每行文本的最大宽度
lineNum：最多绘制的行数
*/
textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
	let drawTxt = ''; // 当前绘制的内容
	let drawLine = 1; // 第几行开始绘制
	let drawIndex = 0; // 当前绘制内容的索引
	// 判断内容是否可以一行绘制完毕
	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 (ctx.measureText(drawTxt).width >= lineMaxWidth) {
				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;
					drawLine += 1;
					drawY += lineHeight;
					drawTxt = '';
				}
			} else {
				// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
				if (i === content.length - 1) {
					ctx.fillText(content.substring(drawIndex), drawX, drawY);
				}
			}
		}
	}
}