Einführung in Raphaël.js

James Williams
James Williams
X Startseite

Einleitung

SVG, kurz für Scaling Vector Graphics, ist eine XML-basierte Sprache zum Beschreiben von Objekten und Szenen. SVG-Elemente können Ereignisse auslösen und können mit JavaScript erstellt werden. SVG verfügt über mehrere integrierte primitive Typen wie Kreise und Rechtecke. Außerdem kann Text angezeigt werden. Obwohl SVG als Technologie nicht neu ist, ermöglicht HTML5 jetzt die direkte Einbettung von SVG-Objekten in eine Seite, ohne ein <object>- oder <embed>-Tag zu verwenden. Damit entspricht dies dem, was derzeit für den Canvas verfügbar ist. Raphaël.js ist eine JavaScript-Bibliothek, mit der Sie SVG-Szenen programmatisch erstellen können. Es nutzt eine einheitliche API zum Erstellen von SVG-Szenen, sofern dies unterstützt wird, bzw. VML(Vector Modeling Language), wo dies jetzt der Fall ist, nämlich Internet Explorer-Versionen vor IE9.

Die erste Szene zeichnen

Beginnen wir damit, mit Raphaël eine einfache Szene zu zeichnen. Wir beginnen mit dem Zeichnen der Szene, indem wir ein Raphaël-Objekt instanziieren. In diesem Fall habe ich den Konstruktor verwendet, der es in ein bestimmtes HTML-Element mit einer bestimmten Breite und Höhe einfügt. Sie können aber auch Raphaël das Objekt an das DOM (Document Object Model) anhängen lassen. Als Nächstes habe ich ein Rechteck mit den gewünschten x- und y-Positionen mit Breite und Höhe erstellt. Als Nächstes habe ich einen Kreis mit den gewünschten Koordinaten und dem gewünschten Radius erstellt. Zuletzt verwendete ich die Attributfunktion (attr), um den Objekten Farben zuzuweisen.

Jedem SVG-Objekt können Attribute wie Farbe, Drehung, Strichfarbe und -größe usw. zugewiesen werden. Eine detaillierte Liste der zuweisbaren Attribute finden Sie hier.

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

Erweiterte Formen mit Pfaden zeichnen

Ein Pfad besteht aus einer Reihe von Anweisungen, die vom Renderer zum Erstellen von Objekten verwendet werden. Mit einem Pfad zu zeichnen ist wie mit einem Stift auf einem riesigen Millimeterpapier zu zeichnen. Sie können festlegen, dass der Stift vom Papier angehoben und an eine andere Position bewegt werden soll, um eine Linie zu zeichnen oder eine Kurve zu zeichnen. Mithilfe von Pfaden kann SVG Objekte mit derselben Detailebene erstellen, unabhängig von der Größe. Wenn Sie eine Anweisung ausgeben, um eine Kurve zu zeichnen, berücksichtigt SVG die ursprüngliche und endgültige gewünschte Größe der Kurve (nach der Skalierung) und berechnet die Zwischenpunkte mathematisch, um eine glatte Kurve zu rendern.

Der Code und die Abbildung unten zeigen ein Rechteck und eine geschlossene Kurve, die mit Pfaden gezeichnet wird. Der Buchstabe M, gefolgt von den Koordinaten, verschiebt den Stift an diese Position, mit dem Koordinatenpaar L wird eine Linie von der aktuellen Position zu dieser Position gezeichnet. s zeichnet eine geglättete Bézierkurve mit einem bestimmten Kontrollpunkt und einem Endpunkt mit relativen Koordinaten. Z schließt einen Pfad. Im Allgemeinen wird bei Verwendung eines Großbuchstabens der Befehl mit absoluten Koordinaten ausgegeben, in Kleinbuchstaben werden relative Koordinaten verwendet. M/m bzw. Z/z führen denselben Befehl für Groß- und Kleinbuchstaben aus. Eine Liste aller Pfadanleitungen finden Sie hier.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

Text zeichnen

Illustrationen ohne die Möglichkeit zum Zeichnen von Text zu sein, wäre wirklich langweilig. Zum Glück bietet Raphaël zwei Methoden zum Zeichnen von Text. Bei der ersten Methode, „Text“, werden x- und y-Koordinaten zusammen mit der zu zeichnenden Zeichenfolge verwendet. Bei der Textmethode haben Sie wenig Kontrolle über die Schriftart oder andere Effekte. Als Standardschrift wird die Standardgröße verwendet.

Bei der zweiten Methode, „print“, wird der Text als eine Sammlung von Pfaden gezeichnet. Dadurch sind wir in der Lage, einzelne Buchstaben zu ändern. Im folgenden Beispiel haben wir die Zahl 5 orangefarben und „ROCKS“ mit einer bläulichen Füllung eingefärbt und den Strich dicker, um fett formatierten Text zu simulieren. Dazu haben wir eine benutzerdefinierte Schriftart mit einer Schriftgröße von 40 pts verwendet.

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

Die Schriftart Vegur ist weder in Raphaël noch eine andere Schriftart in diesem Fall. Außerdem nutzen die meisten Schriftarten das TrueType(TTF)- oder OpenType(OTF)-Format. Um aus diesen Formaten etwas zu machen, das von Raphaël verwendet werden kann, müssen wir sie mit einem Tool namens Cufon konvertieren. Mit Cufon können Sie die verschiedenen Schriftstile einer bestimmten Schriftart (regulär, fett, kursiv, fett-kursiv usw.) zur Verwendung mit Raphaël exportieren. Cufon wird in dieser Anleitung nicht ausführlich behandelt. Weitere Informationen finden Sie unter dem oben genannten Link. Eine hervorragende Quelle für unbearbeitete Schriftarten für Ihre Anwendungen ist das Google Font Directory.

Veranstaltungen

Mit SVG-Elementen können alle herkömmlichen mausbasierten Ereignisse direkt abonniert werden: click, dblclick, click, dblclick, click, click,BEmove, watchout, Mouseover, Mouseup und Hover. Raphaël bietet die Möglichkeit, dem Canvas oder einzelnen Elementen eigene Methoden hinzuzufügen. Theoretisch hindert Sie also nichts daran, Gesten für mobile Browser hinzuzufügen.

Das folgende Snippet bindet eine Funktion so ein, dass ein bestimmter Buchstabe in "ROCKS" um 45 Grad gedreht wird, wenn auf ihn geklickt wird.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG und Canvas im Vergleich

Da es sich bei beiden Methoden zum Zeichnen von Objekten auf dem Bildschirm um beide Methoden handelt, ist oft nicht sofort klar, warum Sie eine dieser Methoden anstelle der anderen verwenden sollten. Die beiden Medien verfolgen sehr unterschiedliche Ansätze. Canvas ist eine API im unmittelbaren Modus, die dem Zeichnen mit Buntstiften ähnelt. Sie können einen Teil der Zeichnung löschen oder zerstören, allerdings nicht standardmäßig einen vorherigen Strich rückgängig machen oder ändern. Canvas ist auch eine Raster-Bitmap, sodass es bei der Skalierung von Bildern sehr häufig verpixelt wird. SVG hingegen kann, wie bereits erwähnt, mehrere Auflösungen mit gleicher Detailgenauigkeit bereitstellen und für Skripts erstellt werden.

Es ist ziemlich einfach, SVG oder Canvas für die Programmierung von Spielen zu verwenden. Abgesehen von den normalen Einschränkungen bei der Bereitstellung auf Computern oder Mobilgeräten kommt es vor allem auf die Anzahl der Sprite an. SVG eignet sich für Spiele, die ich als Low-Fidelty-Spiele bezeichne. Ich beschreibe diese als Spiele, bei denen Objekte nur begrenzt verschoben und Sprite entfernt und erstellt werden können. In diese Kategorie fallen viele Brettspiele wie Schach, Dame oder Schlachtschiff sowie Kartenspiele wie BlackJack, Poker und Hearts. Ein weiterer verbindender Thread ist, dass in vielen dieser Spiele ein Spieler ein beliebiges Objekt verschieben muss und die Skriptfähigkeit von SVG die Objektauswahl erleichtert.

Authoring-Tools für SVG

Die Verwendung von SVG bedeutet nicht, dass Sie Pfade manuell erstellen müssen. Es gibt verschiedene Open-Source- und kommerzielle Tools, mit denen Sie SVG-Dateien exportieren können. Die beiden Tools, die ich häufig verwendet habe und die ich sehr empfehle, sind Inkscape und svg-edit.

svg-edit

svg-edit ist ein browserbasierter SVG-Editor, der in JavaScript geschrieben wurde. Es bietet eine begrenzte Benutzeroberfläche, die an GIMP oder MS Paint erinnert. Wenn der Detaillierungsgrad nicht relativ niedrig war, habe ich svg-edit hauptsächlich verwendet, um SVG-Zeichnungen zu optimieren, anstatt sie zu erstellen. Mit svg-edit können Sie Objekte grafisch oder mit SVG-Code erstellen.

Tintenzeichnung

Inkscape ist ein plattformübergreifender, vollwertiger Editor für Vektorgrafiken, ähnlich wie CorelDraw, Adobe Illustrator und Xara. Inkscape profitiert von einer lebhaften Plug-in-Community und einer ausgereiften Codebasis. Der Vorgänger von Inkscape, von dem Inkscape verzweigt wurde, wurde 1999 entwickelt. Inkscape ist meine bevorzugte Anwendung für vektorbasierte und Bitmap-Assets.

Eine Nebenseite

SVG wird unter Windows in Internet Explorer-Versionen vor IE9 nicht unterstützt. IE verwendet ein Vektorgrafikformat namens VML (Vector Markup Language), das weitgehend dieselben Funktionen wie SVG bietet. Raphaël kann Szenen mit SVG oder VML erstellen, sofern dies unterstützt wird. Raphaël ist eine einfache Möglichkeit, plattformübergreifenden Support zu bieten.

Verweise