Código de implementación para el ajuste automático de líneas del contenido de texto del dibujo del lienzo

Se requiere crear una página de tarjeta de invitación, en la que el número de palabras en el título es dinámico y puede mostrar hasta 2 líneas. Si excede las 2 líneas, se agregarán puntos suspensivos al final de la segunda línea de contenido. Según la personalidad de la chica del producto, existe una alta probabilidad de que la configuración de cuatro líneas se cambie en el futuro, por lo que no debe estar codificada aquí. Como resultado, hace unos días, lo pedí. cámbielo para mostrar hasta 4 líneas y las demás seguirán igual. ¡La chica del producto es demasiado joven :)!

Sin más preámbulos, ¡aquí tienes el código para presumir! Antes de cargar el código, ¡eche un vistazo a los parámetros que deben pasarse! !

Descripciones de parámetros con imágenes y textos, perdóname por mi impaciente tecnología y diseño de PS

• ctx: contexto del lienzo
• contenido: el contenido del texto que se va a dibujar
• drawX: dibuja la coordenada x del texto
• drawY: dibuja la coordenada y del texto
• lineHeight: altura de línea entre textos
• lineMaxWidth: ancho máximo de cada línea de texto
• lineNum: el número máximo de líneas dibujadas

 // Función de ajuste automático de líneas de texto textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = '' // El contenido dibujado actualmente var drawLine = 1 // Qué línea comenzar a dibujar var drawIndex; = 0; // Índice del contenido del dibujo actual // Determina si el contenido se puede dibujar en una línea 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]; (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { // Agregue puntos suspensivos a la última línea ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY } else { // Si no es la última línea, ctx.fillText( content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1 // Graba el siguiente idnex de la última cadena de la línea actual, que se utiliza para dibujar la primera palabra de la siguiente línea drawLine; += 1; // Número de líneas + 1 drawY += lineHeight; // La coordenada y del contenido dibujado aumenta la altura de la línea en consecuencia drawTxt = ''; Restablecer el contenido dibujado } } } }}

En el proceso de dibujar texto, descubrí que la coordenada y del texto de dibujo debe basarse en la parte superior del texto. Una imagen vale más palabras, ¡la imagen de arriba!

Entorno del navegador: chrome 71.0.3578.98 (versión oficial) (64 bits)

El tamaño de fuente es 40px

Cuando la coordenada y se dibuja en 40, puede ver que el texto se puede mostrar completamente

Este es un efecto de código relativamente impopular, pero espero que pueda ayudar a los amigos que lo necesitan. También espero que todos apoyen VeVb Wulin Network.