Cet article explique comment résoudre le problème de retour à la ligne de drawText pendant le processus de dessin sur toile. Examinons d'abord un problème que tout le monde rencontre habituellement lors du dessin de texte sur toile :
Une toile 150*100 avec une bordure claire
<canvas id=canvas style=border:solid 1px darkgoldenrod; width=200px height=100px></canvas>
Regardons d'abord la méthode fillText(), et la méthode StrokeText() est la même.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = Si la vie vous trompe, ne soyez pas triste ! merci !ctx.fillText(str,0,20);
Vous pouvez voir que fillText() ne s'enroulera pas automatiquement lorsqu'il y a trop de mots dans un canevas à largeur fixe. Nous pouvons augmenter la largeur du canevas lui-même, mais ce n'est pas la manière fondamentale de résoudre le problème. Je me souviens encore que lorsque j'ai introduit l'API de base du canevas auparavant, il y avait une fonction, context.measureText(text) Cette fonction peut mesurer la largeur et la hauteur de la police, ce qui est facile à gérer. Nous calculons la longueur de notre chaîne. et ajoutez une largeur approximative. Fondamentalement, ce problème de retour à la ligne peut être résolu.
Examinons la méthode de mise en œuvre spécifique :
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; var str = Si la vie vous trompe, ne soyez pas triste ! merci!var lineWidth = 0;var canvasWidth = c.width;//Calculer la largeur du canevas var initHeight=15;//La hauteur initiale de la police dessinée à partir du haut du canevas var lastSubStrIndex= 0; La chaîne interceptée à chaque fois 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);//Dessine la partie interceptée initHeight+=20;//20 est la hauteur de la police lineWidth=0; je; } if(i==str.length-1){//Dessinez la partie restante ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight }}Voir les rendus :
Algorithme : calculez la somme de la largeur et de la largeur de ligne de chaque caractère de la chaîne str. Si elle est supérieure à la largeur du canevas, interceptez cette partie pour le dessin, puis réinitialisez la largeur de ligne, enregistrez le dernier index où l'interception a commencé, et lorsque la variable de boucle i est le dernier caractère, dessinez directement les parties restantes.
Suivant : Nous l'encapsulons dans une méthode afin qu'elle puisse être appelée directement plus tard :
/*str : chaîne à dessiner canvas : objet canevas initX : coordonnée x de départ de la chaîne de dessin initY : coordonnée y de départ de la chaîne de dessin lineHeight : hauteur de ligne de mot, vous pouvez définir une valeur par vous-même */function canvasTextAutoLine(str, canvas, initX,initY,lineHeight){ var ctx = canvas.getContext(2d); var lineWidth = 0; lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth-initX){//Soustraire initX pour éviter les problèmes avec des limites 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);Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.