In diesem Artikel wird erläutert, wie Sie das Zeilenumbruchproblem von drawText während des Zeichenvorgangs auf der Leinwand lösen können. Schauen wir uns zunächst ein Problem an, auf das normalerweise jeder beim Zeichnen von Text auf der Leinwand stößt:
Eine 150*100 Leinwand mit klarem Rand
<canvas id=canvas style=border:solid 1px darkgoldenrod; width=200px height=100px></canvas>
Schauen wir uns zunächst die Methode fillText() an. Die Methode StrokeText() ist dieselbe.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = Wenn das Leben dich täuscht, sei bitte nicht traurig! Danke!ctx.fillText(str,0,20);
Sie können sehen, dass fillText() nicht automatisch umgebrochen wird, wenn zu viele Wörter in einer Leinwand mit fester Breite vorhanden sind. Wir können die Breite der Leinwand selbst erhöhen, aber das ist nicht die grundlegende Möglichkeit, das Problem zu lösen. Ich erinnere mich noch daran, dass es bei der Einführung der grundlegenden Canvas-API eine Funktion gab, context.measureText(text) Diese Funktion kann die Breite und Höhe der Schriftart messen, was einfach zu handhaben ist und fügen Sie eine ungefähre Breite hinzu. Grundsätzlich kann dieses Zeilenumbruchproblem gelöst werden.
Schauen wir uns die spezifische Implementierungsmethode an:
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; var str = Wenn das Leben Sie täuscht, seien Sie bitte nicht traurig! Vielen Dank!var lineWidth = 0;var canvasWidth = c.width;//Berechne die Breite der Leinwand var initHeight=15;//Die anfängliche Höhe der gezeichneten Schriftart vom oberen Rand der Leinwand var lastSubStrIndex= 0; Der jedes Mal abgefangene String 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);//Den abgefangenen Teil zeichnen initHeight+=20;//20 ist die Höhe der Schriftart lineWidth=0; lastSubStrIndex= ich; } if(i==str.length-1){//Den verbleibenden Teil zeichnen ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);Sehen Sie sich die Renderings an:
Algorithmus: Berechnen Sie die Summe der Breite und Linienbreite jedes Zeichens in der Zeichenfolge str. Wenn sie größer als die Breite der Leinwand ist, fangen Sie diesen Teil zum Zeichnen ab, setzen Sie dann die Linienbreite zurück, speichern Sie den letzten Index, an dem das Abfangen begann, und Wenn die Schleifenvariable i das letzte Zeichen ist, zeichnen Sie die restlichen Teile direkt.
Als nächstes: Wir kapseln es in eine Methode, damit es später direkt aufgerufen werden kann:
/*str: Zu zeichnender String Canvas: Canvas-Objekt initX: Start-X-Koordinate des Zeichenstrings initY: Start-Y-Koordinate des Zeichenstrings lineHeight: Wortzeilenhöhe, Sie können einen Wert selbst definieren */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){//Subtrahieren Sie initX, um Probleme zu vermeiden mit Grenzen 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);Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.