uni canvas 文字换行(多行)方法

在这里插入代码片
**/**
 * @数组内容canvas图片上换行
 * @temp数组字符串 ['是读书读书读','圣诞节四点九四级']
 * @context //uni.createCanvasContext('myCanvas', this);
 * // let context = uni.createCanvasContext('myCanvas', this);
 *@lns控制单条字符串换行的行数
*/**

export const canvasMeasureText = (temp,context,lns) => {
	let tabindex = 0
	console.log(temp)
	for(let i = 0; i < temp.length; i++) {
		const txtTemp = temp[i].replace(/\s*/g,"")
	// console.log("执行了3333。。。")
		// console.log("i.length======》。",i,i.length)
		// console.log("temp【i】.length======》。",txtTemp,txtTemp.length)
		// const text = '这是要换行的文本内容';
			const maxWidth = 80; // 最大宽度,超过该宽度则换行
			const lineHeight = 7; // 行高
			const breakTextLines = (txtTemp, maxWidth) => {
				const words = txtTemp.split('');
				let line = '';
				const lines = [];
				for (let i = 0; i < words.length; i++) {
					const word = words[i];
					const testLine = line + word;
					const metrics = context.measureText(testLine);
					
					if (metrics.width > maxWidth && i > 0) {
						lines.push(line);
						line = word;
					} else {
						line = testLine;
					}
				}
				lines.push(line);
				return lines;
			};
			const lines = breakTextLines(txtTemp, maxWidth);
			lines.forEach((line, index) => {
				context.setFontSize(4)
				tabindex = tabindex +1
				context.fillText(line, 0, tabindex * lineHeight);
				console.log('tabindex=====》',tabindex,'=======》',context.fillText(line, 0, tabindex * lineHeight))
			});
		console.log("执行了4444。。。")
		// tabindex=0
	}
	tabindex=0
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值