Adding Letter Spacing in HTML Canvas

Ich habe viele StackOverflow-Antworten und andere Seiten gelesen, in denen es darum geht, Buchstabenabstände in Canvas zu erstellen. Eine der nützlicheren warBuchstabenabstand im Zeichenflächenelement

Wie die andere Frage sagte: 'Ich habe dieses Canvas-Element, zu dem ich Text zeichne. Ich möchte den Buchstabenabstand ähnlich dem CSS-Buchstabenabstandsattribut festlegen. Damit meine ich, die Anzahl der Pixel zwischen den Buchstaben zu erhöhen, wenn eine Zeichenfolge gezeichnet wird. ' Beachten Sie, dass der Buchstabenabstand manchmal und fälschlicherweise als Kerning bezeichnet wird.

Ich stelle fest, dass der allgemeine Ansatz darin zu bestehen scheint, die Zeichenfolge buchstabenweise auszugeben, MeasureText (Buchstabe) zu verwenden, um die Breite des Buchstabens zu ermitteln, und dann zusätzlichen Abstand hinzuzufügen. Das Problem dabei ist, dass Buchstabenkerning-Paare und dergleichen nicht berücksichtigt werden. Unter dem obigen Link finden Sie ein Beispiel für diesen und verwandte Kommentare.

Scheint mir, dass der Weg, es für einen Zeilenabstand von "Abstand" zu tun, wäre, etwas zu tun wie:

Start an Position (X, Y).Measure wAll, die Breite der gesamten Zeichenfolge mit measureText ()Entfernen Sie das erste Zeichen aus der ZeichenfolgeDrucke das erste Zeichen an Position (X, Y) mit fillText ()Measure wShorter, die Breite der resultierenden kürzeren Zeichenfolge mit measureText ().Subtrahieren Sie die Breite der kürzeren Zeichenfolge von der Breite der gesamten Zeichenfolge und geben Sie die Kernbreite des Zeichens an: wChar = wAll - wShorterIncrement X by wChar + spacingwAll = wShorterWiederholen Sie ab Schritt 3

Würde dies das Kerning nicht berücksichtigen? Vermisse ich etwas? Fügt measureText () eine Füllmenge hinzu, die vom äußersten Zeichen abhängt, oder verwendet fillText () in diesem Fall nicht dasselbe System, um das Zeichen auszugeben, und negiert dieses Problem? Jemand in dem oben erwähnten Link "Pixel-Aligned Font Hinting", aber ich sehe nicht, wie das hier zutrifft. Kann jemand allgemein oder spezifisch raten, ob dies funktioniert oder ob es Probleme damit gibt?

EDIT: Dies ist kein Duplikat der anderen Frage, auf die es verweist. Bei der Frage geht es NICHT darum, wie der 'Buchstabenabstand in der Zeichenfläche' gemäß dem vorgeschlagenen Duplikat erfolgen soll. Dies ist eine mögliche Lösung (die meines Wissens von niemand anderem vorgeschlagen wurde) für diese und andere Fragen und die Frage, ob irgendjemand Probleme mit dieser vorgeschlagenen Lösung sehen oder kennen kann - dh es wird nach der vorgeschlagenen Lösung gefragt und seine Punkte, einschließlich Details zu measureText (), fillText () und "pixelausgerichteten Schriftartenhinweisen".

Antworten auf die Frage(4)

Ihre Antwort auf die Frage