Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 10   

10.6 Q und q - quadratische Bezierkurven

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>
      



index  |  Kapitel 10  |  10.5  <<  | 10.6 |  >>  10.7   T und t - Kurzform fuer quadratische Bezierkurven