uni-app canvas文本自动换行

封装

支持单行文本超出换行。多行文本顺位排版

javascript 复制代码
	// 填充自动换行的文本
	function fillFeedText({ctx, text, x, y, maxWidth, lineHeight, color, size}) {
		// 文本配置
		ctx.setFontSize(size);
		ctx.setFillStyle(color);

		// 计算文本换行宽高,换行逻辑
		const words = text.split('');
		let line = '';
		const lines = [];
		for (let i = 0; i < words.length; i++) {
			const word = words[i];
			const testLine = line + word;
			const metrics = ctx.measureText(testLine);
			if (metrics.width > maxWidth && i > 0) {
				lines.push(line);
				line = word;
			} else {
				line = testLine;
			}
		};

		// 填充文本
		lines.push(line);
		let nextStart = 0;
		lines.forEach((line, index) => {
			ctx.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
			nextStart = y + ((index++) * lineHeight)
		});
	}

使用

javascript 复制代码
// 文本集合
				const text = ["时间:" + Tool.now(), state.address, "第三行的文本 试试试试试试试试试试试试试试试试试试试试试试试试试试试试试试"]; // 需要填充两个文本
				let nextStart = state.height * 0.88;  // 文本的起点
				text.forEach((line) => {
					nextStart = fillFeedText({
						ctx,
						text: line,
						x: padding,
						y: nextStart,
						maxWidth: state.width - padding - 10,
						lineHeight,
						color: '#FFFFFF',
						size: 10
					})
				});

效果

相关推荐
软工的小白1 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
2501_916008893 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921433 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
NewChapter °4 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
SY_FC6 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser7 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
neon12047 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
2501_916008897 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915921439 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
织_网11 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app