Il est nécessaire de créer une page de carton d'invitation, dans laquelle le nombre de mots dans le titre est dynamique et peut afficher jusqu'à 2 lignes, s'il dépasse 2 lignes, des points de suspension seront ajoutés à la fin de la deuxième ligne de contenu. Selon la personnalité de la fille du produit, il y a de fortes chances que le réglage des quatre lignes soit modifié à l'avenir, il ne doit donc pas être codé en dur ici. Du coup, il y a quelques jours, j'ai effectivement demandé à le faire. modifiez-le pour afficher jusqu'à 4 lignes, et les autres restent les mêmes. La fille du produit est trop jeune :) !
Sans plus attendre, voici le code pour vous montrer ! Avant de charger le code, jetez un œil aux paramètres à passer ! !
Descriptions des paramètres avec images et textes, pardonnez-moi pour mon impatience en matière de technologie et de design PS
// Fonction de retour à la ligne automatique du texte textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // Le contenu actuellement dessiné var drawLine = 1; // Quelle ligne commencer à dessiner var drawIndex = 0; // Index du contenu actuel du dessin // Détermine si le contenu peut être dessiné sur une seule ligne 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) { // Ajoutez des points de suspension à la dernière ligne ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY); else { // Si ce n'est pas la dernière ligne, ctx.fillText( content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // Enregistre l'identifiant suivant de la dernière chaîne de la ligne actuelle, qui est utilisé pour dessiner le premier mot de la ligne suivante drawLine += 1; // Nombre de lignes + 1 drawY += lineHeight; // La coordonnée y du contenu dessiné augmente la hauteur de la ligne en conséquence drawTxt = ''; // Réinitialise le contenu dessiné } } } }} découverte inattendueEn train de dessiner du texte, j'ai découvert que la coordonnée y du texte de dessin devait être basée sur le haut du texte. Une image vaut plus de mots que l'image ci-dessus !
Environnement du navigateur : chrome 71.0.3578.98 (version officielle) (64 bits)
La taille de la police est de 40 px
Lorsque la coordonnée y dessinée est 0, vous pouvez voir que le texte ne s'échappe qu'un peu dans le coin supérieur gauche.Lorsque la coordonnée y est dessinée à 40, vous pouvez voir que le texte peut être entièrement affiché
post-scriptumIl s'agit d'un effet de code relativement impopulaire, mais j'espère qu'il pourra aider les amis dans le besoin. J'espère également que tout le monde soutiendra le réseau VeVb Wulin.