Komplexe Geometrien
<< < > >> > Hauptteil > Elemente > Komplexe

2. Hauptteil
   2.5 Elemente
     2.5.1 Primitive
     2.5.3 Text
     2.5.4 Komplexe
     2.5.6 Animation
     2.5.7 weitere

Will man eine komplexere Geometrie als ein einfaches Rechteck oder eine Ellipse zeichnen, vielleicht einen Stern oder eine Pfütze, kann man dies mit dem Element <path> machen. Pfade repräsentieren die beliebigen (!) Konturen von Geometrien, die die gleichen Eigenschaften wie die bisher erläuterten Geometrien haben (Fülleigenschaften, Kontureigenschaften, Transparenz...). Neben diesen Attributen hat <path> noch ein zusätzliches, das aber die ganze Mächtigkeit des Elements ausmacht: mit d wird der Verlauf definiert.

Um den Verlauf zu definieren, gibt es verschiedene Kommandos, die als Parameter die Koordinaten von mindestens einem Punkt erwarten. Je nach Kommando kann dann eine gerade Linie, eine gebogene Linie etc. gezeichnet werden. Werden diese Kommandos hintereinander gesetzt, wird aus diesen Linien eine Geometrie.

Die Kommandos sind:

Kommando steht für ... Parameter Beschreibung
M oder m moveto x y startet einen neuen (Sub-)Pfad. Ein großes M bedeutet, dass x und y absolute Koordinaten sind und der Subpfad an x und y gestartet werden soll. m steht für eine relative Angabe, ausser wenn am Anfang der Pfaddefinition gleich ein kleines m steht, dann werden x und y als absolut interpretiert.
L oder l lineto (x y)+ zeichnet eine oder mehrere Linien. Auch hier gilt wieder, dass der Großbuchstabe L für absolute und l für relative Koordinaten steht. Es können entweder ein oder mehrere Koordinatenpaare angegeben werden, so wird die Anzahl der zu zeichnenden Linien festgelegt. Hier ein Beispiel zu moveto und lineto anhand eines Sterns.
Z oder z closepath - schließt die Geometrie, indem eine gerade Linie vom aktuellen zum Startpunkt gezeichnet wird. Groß- und Kleinschreibung ist hier irrelevant.
H oder h horizontal lineto x+

zeichnet eine horizontale Linie. Es können auch mehrere Werte angegeben werden, das macht aber nur selten Sinn. H = absolute Werte, h = relative
V oder v vertical lineto y+ zeichnet eine vertikale Linie. Es können auch mehrere Werte angegeben werden, das macht aber nur selten Sinn. V = absolute Werte, v = relative
C oder c curveto (x1 y1 x2 y2 x y)+ zeichnet vom aktuellen Punkt zu (x,y) eine kubische Bézierkurve, wobei die zwei Kontrollpunkte über x1, y1 und x2, y2 angegeben werden. Ein Beispiel findet sich hier. Hier soll nun nicht im Detail erklärt werden, wie Bézierkurven durch die Konrtollpunkte berechnet werden. Aber in diesem Beispiel kann interaktiv ausprobiert werden, wie die Kontrollpunkte sich auf die Kurve auswirken. Bei dem Beispiel können dazu die Kontrollpunkte mit gedrückter Maustaste gezogen werden. Der Code muß natürlich an dieser Stelle noch nicht verstanden werden.
S oder s shorthand/smooth curve (x2 y2 x y)+ zeichnet ebenfalls eine Bézierkurve, aber der erste Kontrollpunkt wird nicht mit angegeben, sondern ist automatisch die Reflektion des zweiten Kontrollpunktes der Kurve davor, was einen weichen Übergang ergibt. Wurde vorher keine Kurve definiert, fallen die Kontrollpunkte zusammen.
Q oder q quadratic Bézier curve (x1 y1 x y)+ zeichnet eine quadratische Bézierkurve vom aktuellen Punkt zu (x,y) , d. h. es muss über x1 y1 nur ein Kontrollpunkt angegeben werden: Beispiel. Und im nächsten Beispiel kann interaktiv die Beeinflussung des Kontrollpunktes auf die Kurve ausprobiert. Der Code muß natürlich an dieser Stelle noch nicht verstanden werden.
T oder t Shorthand/smooth quadratic Bézier curveto (x y)+ zeichnet eine quadratische Bézierkurve vom aktuellen Punkt zu (x,y). Der Kontrollpunkt ist die Reflexion des Kontrollpunktes der Kurve zuvor oder entspricht dem aktuellen Punkt, wenn zuvor keine Kurve definiert wurde.
A oder a elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ zeichnet einen elliptischen Bogen vom aktuellen Punkt zu (x, y). Die Radien der Ellipse werden über rx und ry angegeben und die Rotation der Ellipse gegen die X-Achse über x-axis-rotation. Da diese Angaben alleine nicht ausreichen, um einen eindeutigen elliptischen Bogen zu generieren, gibt es noch die zwei Flags: Das large-arc-flag entscheidet, ob der größere Bogen angezeigt werden soll; das sweep-flag entscheidet, ob der obere oder untere Bogen gezeichnet werden soll. Das Beispiel 19 erklärt nochmal anschaulich den Nutzen der Flags. Im Beispiel 20 zeigt die Auswirkungen der Benutzung von x-axis-rotation.

Am Ende des Kapitels soll noch ein Beispiel 21 die Kombination verschiedener Kommandos demonstriert werden.