Der Inhalt

Raphaël SVG Formen

Die JavaScript-Bibliothek verfügt natürlich über entsprechende Möglichkeiten, um die grundlegenden geometrischen Formen als SVG-Code zu erzeugen

Rechteck

Einrechteck wird so erzeugt:

var rechteck = paper.rect(xobenlinks,yobenlinks,breite,hoehe);

Also das folgende Beispiel mit

var rechteck = paper.rect(10,10,80,40);

Abgerundetes Rechteck

Das abgerundete Rechteck ist nur eine Modifikation des vorher beschriebenen Rechtecks. Es wird so erzeugt:

var rechteck = paper.rect(xobenlinks,yobenlinks,breite,hoehe,rundungsradius);

Also das folgende Beispiel mit

var rechteckrund = paper.rect(10,10,80,40,5);

Eine Möglichkeit, den Rundungsradius für die einzelnen Ecken getrennt festzulegen besteht nicht.

Kreis

Ein Kreis wird so erzeugt:

var kreis = paper.circle(xmittelpunkt, ymittelpunkt, radius);

Also das folgende Beispiel mit

var kreis = paper.circle(55, 60, 50);

Ellipse

Ein Ellipse wird so erzeugt:

var ellipse = paper.ellipse(xmittelpunkt,ymittelpunkt,radiushorizontal,radiusvertikal);

Also das folgende Beispiel mit

var ellipse = paper.ellipse(70, 40,60,40);

Pfad

Pfade dienen der Kontruktion komplexerer grafischer Objekte. Der grundsätzliche Aufbau von Pfaden wurde bereits im Abschnitt SVG Pfade erklärt. Diesem Aufbau folgt auch die Kontruktion von Pfaden mit Raphael, wie man an dem weiter unten gezeigten Beispiel erkennen kann, dessen Quellcode so ausssieht:

Text

Ein Text wird so erzeugt:

var text = paper.text(xobenlinks,yobenlinks, "der text");

Wie man in dem folgenden Beispiel sieht, werden Zeilenumbrüche mit \n erzeugt.

var text = paper.text(40, 30, "Alles\nfrisch\ngezeichnet");

Linien

Einen direkten Befehl zum Erzeugen von Linien habe ich bei Raphael nicht gefunden. Man muss sich also mit rect oder path behelfen.