So ordnen Sie Kreise automatisch an, um Buchstaben zu bilden.

Die Antwort besteht aus zwei Teilen ...

1. Suchen der "Buchstabenform",

2. Erstellen von Kreisen zum Füllen und Umriss der Buchstabenform.

1. Der schwierige Teil

Frederik De Bleser hat eine schöne Bibliothek namens opentype.js programmiert, die eine .ttf-Schriftartdatei verwendet und die Glyphenumrandung eines bestimmten Zeichens mit quadratischen Kurven auf einer Zeichenfläche analysiert: Ссылка

2. Der einzige etwas weniger harte Teil

Für jeden Buchstaben:

• Finde "viele" Punkte auf jeder quadratischen Kurve. Hier ist der Algorithmus zum Berechnen eines [x, y] auf der Kurve in einem Intervall T. T liegt im Bereich von 0,00 am Anfang der Kurve bis 1,00 am Ende der Kurve. T erzeugt keine gleichmäßig verteilten [x, y] -Werte entlang der Kurve, so dass Sie eine Überabtastung durchführen müssen (So kann "viele" 1000 Werte von T zwischen 0,00 und 1,00 bedeuten).

  %Vor%

• Bestimmen Sie den Winkel, der den Winkel der Kurve an diesen Punkten berührt. (Grundsätzlich berechnen, was wäre ein rechter Winkel zur Kurve). Sie können das mit der nächsten Ableitung der quadratischen Formel tun:

  %Vor%

• Berechnen Sie ausgehend vom Anfang der Kurve jeden Abstand vom aktuellen [x, y] zum nächsten [x, y]. Sie können dies mit dem Satz des Pythagoras tun:

  %Vor%

• Dekomprimieren Sie das Array so, dass alle verbleibenden [x, y] -Elemente 1px vom vorherigen [x, y] -Element entfernt sind. Sie können dies tun, indem Sie ein zweites Array mit Werten aus dem ersten füllen, in dem parseInt( nextInOriginalArray - lastDistanceInNewArray)==1;

steht

• Entscheiden Sie sich für einen Radius für Ihre Kreise, aus denen sich jeder Buchstabe zusammensetzt. Das ist tatsächlich schwieriger als es scheint. Für "blocky" -Schriften können Sie den Buchstaben "I" auf der Leinwand zeichnen. Dann hole alle Pixel mit getImageData . Berechnen Sie die Breite des vertikalen Strichs des "I", indem Sie nach der Anzahl der undurchsichtigen Pixel suchen, die horizontal in der vertikalen Mitte des Buchstabens verlaufen. Für blockige Schriftarten var radius = horizontalOpaquePixelCount/2; . Bei Schriftarten mit Strichen variabler Breite müssen Sie erfinderisch sein. Vielleicht var radius = horizontalOpaquePixelCount/3; oder var radius = horizontalOpaquePixelCount/4; .

• Iteriere durch das Punkte-Array und definiere einen neuen Kreis für jedes radius*2 Pixel. Sie berechnen den Mittelpunkt für jeden Kreis mit dem Tangentenwinkel und der Trigonometrie wie folgt:

  %Vor%

• Beim Kreieren von Kreisen kehren sich die Kurven des Buchstabens irgendwann in sich selbst zurück. Daher müssen Sie jeden neu erstellten Kreis überprüfen, um sicherzustellen, dass er sich nicht mit einem vorhandenen Kreis überschneidet. Sie können berechnen, ob ein neuer Kreis jeden vorhandenen Kreis wie folgt schneidet:

  %Vor%

Feinabstimmung: In der Nähe einiger Endpunkte im Pfad des Briefs werden Sie feststellen, dass ein nächster Kreis mit vollem Radius aus der Buchstabenform ausläuft. In diesem Fall könnten Sie den Radius einiger Kreise verkleinern, um sie an die Buchstabenform anzupassen. Wenn Sie nur einen festen Radius für Ihre Kreise wünschen, können Sie den festen Radius aller Kreise basierend auf den durchschnittlichen Radien aller Kreise neu berechnen - einschließlich derjenigen, die Sie "schrumpfen" mussten, um in die Buchstabenform zu passen.

Zum Beispiel. Dies ist der Buchstabe "L" aus 15 Kreisen.

Aber die 2 roten Kreise fallen aus der Buchstabenform heraus. Sie könnten (1) die roten Kreise so verkleinern, dass sie in die Buchstabenform passen, oder (2) einen neuen festen Kreisradius basierend auf den durchschnittlichen Radien, die zur Buchstabenform passen, neu berechnen:

Sie können die Länge des roten Radius berechnen, der zur Buchstabenform passt, indem Sie den Schnittpunkt von 2 Linien berechnen: (1) das Liniensegment, das durch Verbinden der Mitte der letzten grünen Kreise mit der Mitte der roten Kreise (2) gebildet wird senkrecht vom letzten Punkt der Kurve gebildet. Hier ist ein Algorithmus, um den Schnittpunkt von 2 Zeilen zu berechnen: