Bézierkurven
Die Punkte eines Pfades können auch durch Kurven miteinander verbunden werden. Zu jedem Punkt des Pfades kann ein Kontrollpunkt angegeben werden, der die Krümmung der Kurve bis zum nächsten Punkt bestimmt.
In der Vektorgrafik mit grafischer Benutzeroberfläche – Illustrator, Photoshop, Inkscape – zeichnen wir Freistellpfade meist mit der kubischen Bézierkurve. In »Handarbeit« sind aufwändige Formen fast immer zu komplex – bei komplizierten Formen ist ein grafischer Editor unersetzlich.
Gute Einführung in die Berechnung von Bézierkurven für diejenigen, die Bézierkurven programmieren wollen: Bézier curves – a primer von Mike "Pomax" Kamermans
Bézierkurven
Quadratische Bézierkurve <path d="M70 250 Q20 110 ,250 60" stroke="black" /> Kubische Bézierkurve <path d="M120 160 C35 200 , 220 260 ,220 40" stroke="black" />
Kurvenpunkte mit Großbuchstaben werden als absolute Werte interpretiert, bei Kleinbuchstaben wird der Punkt relativ zum vorangegangenen Punkt gerendert.
Startpunkt Endpunkt
| |
┌-----┴---┐ ┌------┴------┐
| | | |
▼ ▼ ▼ ▼
Mx y Cx y, x y, x y
▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
└-┬┘ └--┬-┘ └---┤ └---┤
| | | └-- Endpunkt der Kurve
| | └--Kontrolpkt
| └-- Kontrolpkt des Endpunkts
| des Startpunkts
|
└-- Startpunkt der Kurve
Kurvensegmente aneinanderfügen
<path d=" M 50 150 C70 250 , 130 250 ,150 150 M150 150 C170 50 , 230 50 , 250 150 M250 150 C270 250 , 330 250 ,350 150 M350 150 C370 50 , 430 50 , 450 150 M450 150 C470 250 , 530 250 ,550 150" fill="hsla(0,0%,75%,0.5)" stroke="black" stroke-width="2" />
Jetzt wird Segment an Segment gehangen: Der Endpunkt eines Segments ist der Startpunkt M des nächsten Segments.
Der Pfad in diesem Beispiel ist gefüllt. Bezierkurven brauchen genauso wie Polylines fill="none", damit die Kurve nicht gefüllt wird.
Quadratische Bézierkurven
Quadratische Kurven haben einen Anfangspunkt P0 und einen Endpunkt P1. Ein einzelner Kontrollpunkt C entscheidet über die Rundung der Linien.
<path d="M100 400
Q250 100, 450 300"
fill="none" stroke="green" stroke-width="1"/>
Die Sinuskurve als quadratische Bézierkurve ist kompakter als die kubische Bézierkurve. Die Kontrollpunkte haben jeweils den Präfix Q.
<path d="M0 250
Q50 150, 100 250,
Q150 350, 200 250
Q250 150, 300 250
Q350 350, 400 250
Q450 150, 500 250" stroke="green" fill="none" stroke-width="2" />
Freihand-Bézier
Beim Zeichnen mit der Feder in Grafikprogrammen setzt man i.d.R. immer dort einen Punkt, wo sich die Richtung der Kurve ändert und zieht so weit, das die gewünschte Rundung entsteht.
