25 Juni 2008

Bézierkurven 1

...mit SVG ist es sehr einfach, Bézierkurven auszugeben. Hiezu genügt es, im 'path data'-Attribut (d) des path-Tags (path) einen Startpunkt (mit dem Kommando M) und die Kontrollpunkte und den Endpunkt der gewünschten Kurve (mit C) anzugeben. Das Bild zeigt eine kubische Bézierkurve mit Startpunkt A (100,200), Endpunkt B (250,200) und den jeweiligen Kontrollpunkten S1 (100,100) und S2 (320,80). Mit diesen absoluten Koordinaten sieht das Data-Attribut für den Pfad dann so aus: d="M100,200 C100,100 320,80 250,200"
Danach ist die aktuelle Position zum Weiterzeichen der angegebene Endpunkt B (250,200).
Soll eine weiter Bézierkurve folgen, kann man diese einfach (mit S für 'smooth curveto') anschließen, indem man einen weiteren Kontroll- und einen Endpunkt angibt. Der angegebene Kontrollpunkt S3 (400,300) gehört zu dem angegebenen Endpunkt C (400,200), der 'fehlende' Kontrollpunkt für den Anfang der Kurve wird von SVG berechnet. Beim W3C steht dazu: "The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point." Die Pfaddaten für die beiden Bézierkurven sehen dann so aus:
d="M100,200 C100,100 320,80 250,200 S400,300 400,200"
Das ist, so wie es ist, erstmal recht elegant. 'Problematisch' wird es erst, wenn man aus diesem SVG die einzelnen Kurven der Pfade mit jeweils allen Koordinaten braucht.

Labels: ,