|
Quadratische Bézier-Kurven werden mit der Anweisung Q oder
q definiert.
Für die Erstellung von quadratischen Bézier-Kurven gibt es, analog zu den kubischen
Bézier-Kurven, ebenfalls eine Kurzform:
T
oder t. Diese wird im folgenden Kapitel erläutert.
Wenn Sie eine Bézier-Kurve mit Q oder
q erstellen ist folgendes zu beachten:
der Anfangspunkt der Bézier-Kurve ist, wie auch bei kubischen Bézier-Kurven,
immer der direkt zuvor festgelegte Punkt des Pfades (Startpunkt
M oder
Endpunkt einer vorherigen lineto-Anweisung oder Endpunkt einer vorherigen Kurven-Anweisung
oder ...).
Die Anweisung Q oder q erwartet 2
nachfolgende Koordinatenpunkte:
- die Koordinaten des einzigen Kontrollpunktes
(die imaginäre Linie, die zwischen dem
Anfangspunkt der Bézier-Kurve und dem einzigen Kontrollpunkt verläuft,
bildet die erste Tangente, welche den Verlauf der Kurve beeinflußt;
die imaginäre Linie, die zwischen dem Endpunkt der
Bézier-Kurve und dem einzigen Kontrollpunkt verläuft, bildet die zweite Tangente,
welche den Verlauf der Kurve beeinflußt),
- die Koordinaten des Endpunkts.
Die oben angegebenen Reihenfolge der Koordinatenpunkte muß eingehalten werden.
Wenn Sie versuchen quadratische Bézier-Kurven mit der Anweisung
C oder c zu erstellen,
d.h. wenn die 2 festzulegenden Kontrollpunkte der kubischen Bézier-Kurve mit ihren Koordinaten übereinstimmen, werden Sie allerdings festellen, daß die kubische Kurve eine weitaus stärkere Ausbuchtung besitzt.
Für diesen Hinweis Dank an Tobias.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="460" height="280"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das path-Element</title>
<desc>quadratic bezier curves - Q und q</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana; font-size:14px; fill:black;}
path {fill:none; stroke:red; stroke-width:2px;}
line {fill:none; stroke:black;}
circle {fill:black;}
]]>
</style>
</defs>
<text x="20" y="30" style="font-size:16px;">
<tspan style="font-weight:bold">Q|q</tspan>
Kontrollpunkt Endpunkt
</text>
<path d="M 50,150
q 75,-75 150,0" />
<circle cx="50" cy="150" r="3" />
<circle cx="200" cy="150" r="3" />
<circle cx="125" cy="75" r="3" />
<line x1="50" y1="150" x2="125" y2="75" />
<line x1="200" y1="150" x2="125" y2="75" />
<text x="50" y="170">M 50,150</text>
<text x="145" y="70">
<tspan style="font-weight:bold">q</tspan> 75,-75
<tspan x="145" dy="20">Kontrollpunkt</tspan>
</text>
<text x="210" y="160">150,0
<tspan x="210" dy="20">Endpunkt</tspan>
</text>
<text x="50" y="230">absolute Angabe:
<tspan x="70" dy="20">M 50,150
<tspan style="font-weight:bold;">Q</tspan> 125,75 200,150
</tspan>
</text>
</svg>
Das wichtigste Merkmal einer quadratische Bézier-Kurve:
Es ist lediglich ein (1) Kontrollpunkt festzulegen.
Die beiden Tangenten verlaufen dann jeweils durch den einzigen Kontrollpunkt und
dem Start- bzw. Endpunkt der Kurve.
Im obigen Beispiel wird die quadratische Bézier-Kurve mit Hilfe von
relativen Angaben erstellt:
M 50,150 q 75,-75 150,0.
Alternativ können Sie die Kurve natürlich auch durch absolute Angaben erzeugen:
M 50,150 Q 125,75 200,150.
In der folgenden Beispiel-Grafik finden Sie einige Beispiele für quadratische
Bézier-Kurven.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="510" height="580"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das path-Element</title>
<desc>cubic bezier curves - einige Beispiele mit q</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana; font-size:14px; fill:black;}
path {fill:none; stroke:red; stroke-width:2px;}
line {fill:none; stroke:black;}
circle {fill:black;}
]]>
</style>
</defs>
<!-- Kurve 1 -->
<text x="90" y="30">Kurve 1</text>
<path d="M 160,10
q 100,40 200,80" />
<circle cx="160" cy="10" r="3" />
<circle cx="260" cy="50" r="3" />
<circle cx="360" cy="90" r="3" />
<line x1="160" y1="10" x2="260" y2="50" />
<line x1="360" y1="90" x2="260" y2="50" />
<!-- Kurve 2 -->
<text x="90" y="150">Kurve 2</text>
<path d="M 160,130
q 100,-60 200,80" />
<circle cx="160" cy="130" r="3" />
<circle cx="260" cy="70" r="3" />
<circle cx="360" cy="210" r="3" />
<line x1="160" y1="130" x2="260" y2="70" />
<line x1="360" y1="210" x2="260" y2="70" />
<!-- Kurve 3 -->
<text x="90" y="270">Kurve 3</text>
<path d="M 160,250
q 0,-90 200,80" />
<circle cx="160" cy="250" r="3" />
<circle cx="160" cy="160" r="3" />
<circle cx="360" cy="330" r="3" />
<line x1="160" y1="250" x2="160" y2="160" />
<line x1="360" y1="330" x2="160" y2="160" />
<!-- Kurve 4 -->
<text x="90" y="390">Kurve 4</text>
<path d="M 160,370
q 300,0 200,80" />
<circle cx="160" cy="370" r="3" />
<circle cx="460" cy="370" r="3" />
<circle cx="360" cy="450" r="3" />
<line x1="160" y1="370" x2="460" y2="370" />
<line x1="360" y1="450" x2="460" y2="370" />
<!-- Kurve 5 -->
<text x="90" y="510">Kurve 5</text>
<path d="M 160,490
q -140,-120 200,80" />
<circle cx="160" cy="490" r="3" />
<circle cx="20" cy="370" r="3" />
<circle cx="360" cy="570" r="3" />
<line x1="160" y1="490" x2="20" y2="370" />
<line x1="360" y1="570" x2="20" y2="370" />
</svg>
|
