|
Die Kurzform für kubische Bézier-Kurven wird mit der Anweisung
S oder s eingeleitet.
Diese Anweisung erwartet nachfolgend nur 2 Koordinatenpunkte:
- die Koordinaten des zweiten Kontrollpunktes
(die imaginäre Linie, die zwischen dem
Endpunkt der
Bézier-Kurve und dem zweiten Kontrollpunkt verläuft, bildet die zweite Tangente, welche
den Verlauf der Kurve
beeinflußt),
- die Koordinaten des Endpunkts.
Der erste Kontrollpunkt wird automatisch aus dem letzten Kontrollpunkt
der direkt zuvor festgelegten Bézier-Kurve generiert.
Die so entstandene Tangente entspricht in der Länge der Tangente des
zuvor festgelegen Kontrollpunkts, verläuft aber in
genau entgegengesetzte Richtung.
Sie ist also das
"Spiegelbild" der vorherigen Tangente.
Die Verwendung der Anweisungen S oder s
sind daher nur im Zusammenhang mit einer vorangegangen
C oder c Anweisung sinnvoll.
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="500" height="350"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das path-Element</title>
<desc>cubic bezier curves - S und s</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">S|s</tspan>
'Kontrollpunkt' 'Endpunkt'
</text>
<path d="M 50,150
c 0,-50 150,-50 150,0
s 150,50 150,0" />
<circle cx="50" cy="150" r="3" />
<circle cx="50" cy="100" r="3" />
<circle cx="200" cy="100" r="3" />
<circle cx="200" cy="150" r="3" />
<circle cx="200" cy="200" r="3"
style="fill:none;stroke:black;" />
<circle cx="350" cy="200" r="3" />
<circle cx="350" cy="150" r="3" />
<line x1="50" y1="150" x2="50" y2="100" />
<line x1="200" y1="150" x2="200" y2="100" />
<line x1="200" y1="150" x2="200" y2="200"
style="stroke-dasharray:8,2,8,2,8,2,8,2,8,2;" />
<line x1="350" y1="200" x2="350" y2="150" />
<text x="50" y="170">M 50,150</text>
<text x="50" y="70">Kontrollpunkt 1</text>
<text x="50" y="90"><tspan
style="font-weight:bold;">c</tspan> 0,-50</text>
<text x="200" y="70">Kontrollpunkt 2</text>
<text x="200" y="90">150,-50 </text>
<text x="210" y="145">Endpunkt <tspan
style="font-weight:bold;">c</tspan></text>
<text x="210" y="165">150,-50 </text>
<text x="200" y="220"><tspan
style="font-weight:bold;">s</tspan></text>
<text x="200" y="240">generierter
<tspan x="200"dy="20">
Kontrollpunkt
</tspan>
</text>
<text x="360" y="205">150,50</text>
<text x="360" y="225">Kontrollpunkt</text>
<text x="360" y="155">150,0</text>
<text x="360" y="175">Endpunkt</text>
<text x="50" y="290">absolute Angabe:
<tspan x="70" dy="20">M 50,150
<tspan style="font-weight:bold;">
C
</tspan> 50,100 200,100 200,150
</tspan>
<tspan x="142" dy="20">
<tspan style="font-weight:bold;">S</tspan> 350,200 350,150
</tspan>
</text>
</svg>
|
