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" />

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>

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

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.

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!