Wie man quadratische bézier -Kurven auf HTML5 SVGs zeichnet

svg quadratische Bezier -Kurve: Ein Werkzeug zum Zeichnen von glatten Kanten

In diesem Artikel wird untersucht, wie Sie glatte Kanten mit quadratischen Bezier -Kurven in HTML5 SVG zeichnen. Die quadratische Bezier -Kurve wird durch die d -Bäume im SVG -Pfad Q -attribut mit einem Start- und Endpunkt definiert, und die Kurve wird durch einen einzelnen Kontrollpunkt gebogen.

Schlüsselpunkte:

Der
• -Bemerkung im Attribut d SVG -Pfad Q wird verwendet, um eine quadratische Bezier -Kurve zu definieren, die drei Koordinaten enthält: den Startpunkt, den Kontrollpunkt und den Endpunkt.
• Verwenden Sie die Kleinbuchstaben q, um relative Koordinaten anzugeben, während die Anweisungen T und t zum Anschließen mehrerer Kurven verwendet werden können. die Kurve.
• Bei der Codierung und Visualisierung quadratischer Bezier -Kurven kann eine Herausforderung sein, der <path></path> -Coder kann mit dem Tool generiert werden.
• quadrierige Bezier -Kurven können verwendet werden, um komplexe Formen zu erstellen und über <animate></animate> Elemente, CSS -Animationen oder JavaScript animiert werden.

Vorheriger Artikel "So erstellen Sie komplexe Pfade in SVG" untersucht die <path></path> Elemente und zeigt, wie Sie eine Reihe von Liniensegmenten und Bögen zeichnen, um eine Form zu erstellen (häufig verwendet, um Schriftarten zu kopieren, ohne die vollständige Schriftart herunterzuladen). . Die Eigenschaft d bietet einige zusätzliche Tricks, um reibungslose Kurven zu zeichnen. In diesem Artikel werden quadratische Bezier -Kurven erläutert und Sie können auch auf "Wie zeichnen Sie kubische Bezier -Kurven auf SVG -Bildern", um komplexere Optionen zu erhalten.

Was ist eine quadratische Bezier -Kurve?

Die quadratische Bezier -Kurve hat einen Startpunkt (P0) und einen Endpunkt (P2). Ein einzelner Kontrollpunkt (P1) bestimmt die Krümmung der Linie. Die Bezier Curve -Seite von Wikipedia bietet eine gute Illustration:

Bilder stammen von Wikipedia

Mathematik-Enthusiasten können auch Kopfschmerz-induzierende Gleichungen in Wolfram Mathworld anzeigen.

viereckige Kurven eignen sich hervorragend zum Zeichnen von glatten Kanten. Wie aus der folgenden Abbildung ersichtlich ist, ist es einfach, einen Steuerpunkt anzugeben, und normalerweise werden die rechten Winkelkanten angezeigt:

komplexer Pfad

quadratische Bezier -Kurve verwendet die Anweisungsdefinition d im Attribut Q des SVG -Pfades:

<path d="M100,250 Q250,100 400,250" />

Der Befehl

initial M verschiebt den Stift auf den ersten Punkt (100.250). Q folgt zwei Koordinaten: ein einzelner Kontrollpunkt (250.100) und der endgültige gezeichnete Punkt (400.250).

Sie können auch den Kleinbuchstaben q verwenden, um relative Koordinaten anstelle von absoluten Koordinaten darzustellen. Die folgende Kurve ist gleich und kann einfacher zu codieren:

<path d="M100,250 Q250,100 400,250" />

Schließlich gibt es abgekürzte T und t Anweisungen (normalerweise darstellen Kleinbuchstaben relative Koordinaten anstatt absolute Koordinaten). Diese Anweisungen akzeptieren weitere Endkoordinaten, um mehrere Kurven miteinander zu verbinden. Die Kontrollpunkte werden aus dem zuletzt verwendeten Punkt abgeleitet, um eine perfekte glatte, kontinuierliche Kurve zu gewährleisten. Betrachten Sie zum Beispiel den folgenden Pfad:

<path d="M100,250 q150,-150 300,0" />

Es zeichnet eine Kurve von 100.250 bis 400.250 mit dem Kontrollpunkt bei 250.100. Eine weitere Kurve wird dann gezogen und endet bei 700.250, und der Kontrollpunkt wird auf 550.400 abgeleitet.

Die abgeleiteten Kontrollpunkte sind mathematisch korrekt, sind aber möglicherweise nicht immer das, was Sie brauchen!

quadratische Bezier -Kurven können etwas schwierig zu codieren und visualisieren zu <path></path>

codePen Link

Ziehen Sie die Kontrollpunkte an beiden Enden der Kurve. Klicken Sie auf die Kurve selbst, um den Fill -Effekt umzuschalten, wodurch der Befehl zum Ende

hinzugefügt wird.

Z Bitte beachten Sie, dass dieses Tool DOM -Seitenkoordinaten in SVG -Koordinaten konvertieren muss, um sicherzustellen, dass es für alle Bildschirmgrößen ordnungsgemäß funktioniert. Dies kann etwas komplizierter sein als erwartet. Weitere Informationen finden Sie in "So konvertieren Sie von DOM -Koordinaten in SVG -Koordinaten und Rückgabe".

Wenn Sie bereit sind, mit komplexeren Problemen zu befassen, versuchen Sie, eine kubische Bezier -Kurve auf einem SVG -Bild zu erstellen.

(Der im Originaltext erwähnte FAQ -Teil sollte hier hinzugefügt werden. Der Inhalt wurde im Originaltext angegeben und wird hier nicht wiederholt)

Das obige ist der detaillierte Inhalt vonWie man quadratische bézier -Kurven auf HTML5 SVGs zeichnet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!