Canvas 常用方法

痛定思痛。 2023-08-17 15:33 100阅读 0赞

/* 绘制带有间距的文本 text: 要绘制的文本 x: 绘制文本的起始x坐标 y: 绘制文本的起始y坐标 space: 文本间距 ctx: canvas对象 */
    canvasTextSpace(text, x, y, space, ctx) { 
    	let lineWidth = x;
    	for(let i = 0; i < text.length; i++){ 
    		if( i === 0) { 
    			ctx.fillText(text[i], x, y);
    		}else { 
    			lineWidth += (space + ctx.measureText(text[i-1]).width);
    			ctx.fillText(text[i], lineWidth, y);
    		}
    	}
    },
    
    /* 文本超出maxWidtth宽度，自动换行 text: 要绘制的文本 x: 绘制文本的起始x坐标 y: 绘制文本的起始y坐标 lineHeight: 与上一行文本的间距 maxWidtth: 文本最大宽度 ctx: canvas对象 */
    canvasTextAutoLine(text, x, y, lineHeight, maxWidtth, ctx){ 
    	let textWidth = 0; // 文本宽度
    	let lastSubStrIndex= 0;
    	for(let i = 0; i < text.length; i++){ 
    		textWidth += ctx.measureText(text[i]).width;
    		if(textWidth > maxWidtth){ 
    			ctx.fillText(text.substring(lastSubStrIndex,i), x, y);
    			textWidth = 0;
    			lastSubStrIndex = i;
    			y += lineHeight
    		}
    		if(i === text.length - 1){ 
    			ctx.fillText(text.substring(lastSubStrIndex,text.length), x, y);
    		}
    	}
    },
    
    /* 文本超出maxWidtth宽度，显示... text: 要绘制的文本 x: 绘制文本的起始x坐标 y: 绘制文本的起始y坐标 maxWidtth: 文本最大宽度 ctx: canvas对象 */
    canvasTextEllipsis(text, x, y, maxWidtth, ctx){ 
    	let textWidth = 0; // 文本原长度
    	let addDotTextWidth = 0; // 如果超出 文本的显示的实际长度
    	let lastSubStrIndex = 0;
    	let dotCount = 0; // 如果文本带有... 先记录下此时的文本长度
    	let count = 0; // 如果文本超出 画...
    	let dotWidth = ctx.measureText(' ...').width; // 计算 ...的宽度
    	for(let i = 0; i < text.length; i++){ 
    		textWidth += ctx.measureText(text[i]).width;
    		if(textWidth > maxWidtth - dotWidth && !dotCount){ 
    			addDotTextWidth = textWidth - ctx.measureText(text[i]).width
    			lastSubStrIndex = i;
    			dotCount++
    		}
    		if(textWidth > maxWidtth && !count) { 
    			count++
    			ctx.fillText(' ...', x + addDotTextWidth, y);
    		}
    		if(i === text.length - 1){ 
    			ctx.fillText(text.substring(0,count ? lastSubStrIndex : text.length), x, y);
    		}
    	}
    }