Este artículo presenta cómo resolver el problema de ajuste de línea de drawText durante el proceso de dibujo del lienzo. Veamos primero un problema que todo el mundo suele encontrar al dibujar texto en el lienzo:
Un lienzo de 150*100 con un borde claro
<canvas id=canvas style=border:solid 1px darkgoldenrod width=200px height=100px></canvas>
Veamos primero el método fillText(), y el método StrokeText() es el mismo.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = Si la vida te engaña, ¡no estés triste! ¡Gracias!ctx.fillText(str,0,20);
Puede ver que fillText() no se ajustará automáticamente cuando hay demasiadas palabras en un lienzo de ancho fijo. Podemos aumentar el ancho del lienzo en sí, pero esta no es la forma fundamental de resolver el problema. Todavía recuerdo que cuando presenté la API básica de lienzo, había una función, context.measureText(text) Esta función puede medir el ancho y el alto de la fuente, lo cual es fácil de manejar. Calculamos la longitud de nuestra cadena. y agregue un ancho aproximado. Básicamente, este problema de ajuste de línea se puede resolver.
Veamos el método de implementación específico:
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; var str = Si la vida te engaña, ¡no estés triste! ¡gracias!var lineWidth = 0;var canvasWidth = c.width;//Calcular el ancho del lienzo var initHeight=15;//La altura inicial de la fuente dibujada desde la parte superior del lienzo var lastSubStrIndex= 0; La cadena interceptada cada vez Index of for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth){ ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//Dibuja la parte interceptada initHeight+=20;//20 es la altura de la fuente lineWidth=0; i; } if(i==str.length-1){//Dibuja la parte restante ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight }}Vea las representaciones:
Algoritmo: calcule la suma del ancho y el ancho de línea de cada carácter en la cadena str. Si es mayor que el ancho del lienzo, intercepte esta parte para dibujar, luego restablezca el ancho de línea, guarde el último índice donde comenzó la intercepción y cuando la variable de bucle i es el último carácter, dibuja las partes restantes directamente.
Siguiente: Lo encapsulamos en un método para que pueda llamarse directamente más tarde:
/*str: cadena a dibujar lienzo: objeto lienzo initX: coordenada x inicial de la cadena de dibujo initY: coordenada y inicial de la cadena de dibujo altura de línea: altura de línea de palabra, puede definir un valor usted mismo */función canvasTextAutoLine(str, canvas, initX,initY,lineHeight){ var ctx = canvas.getContext(2d var lineWidth = 0; var canvasWidth = c.width; lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth-initX){//Reste initX para evitar problemas con límites ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; lastSubStrIndex=i } if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.