Einführung
SVG (Scalable Vector Graphics) ist eine XML-basierte Sprache zum Beschreiben von Objekten und Szenen. SVG-Elemente können Ereignisse auslösen und mit JavaScript-Scripts programmiert werden. SVG bietet mehrere integrierte primitive Typen wie Kreise und Rechtecke sowie die Möglichkeit, Text anzuzeigen. SVG ist zwar keine neue Technologie, aber mit HTML5 können SVG-Objekte jetzt ohne <object>- oder <embed>-Tag direkt in eine Seite eingebettet werden. Raphaël.js ist eine JavaScript-Bibliothek, mit der Sie SVG-Szenen programmatisch erstellen können.
Es verwendet eine einheitliche API, um SVG-Szenen zu erstellen, wo dies unterstützt wird, oder VML(Vector Modeling Language), wo es derzeit verwendet wird, nämlich in Internet Explorer-Versionen vor IE9.
Erste Szene zeichnen
Zeichnen wir zuerst eine einfache Szene mit Raphaël. Wir beginnen mit dem Zeichnen der Szene, indem wir ein Raphaël-Objekt instanziieren. In diesem Fall habe ich den Konstruktor verwendet, der das Objekt in ein bestimmtes HTML-Element mit einer bestimmten Breite und Höhe einfügt. Sie können das Objekt aber auch über Raphaël an das DOM (Document Object Model) anhängen. Als Nächstes habe ich ein Rechteck erstellt, indem ich die gewünschten X- und Y-Positionen mit der Breite und Höhe angegeben habe. Als Nächstes habe ich einen Kreis erstellt, indem ich die gewünschten Koordinaten und den Radius angegeben habe. Schließlich habe ich mit der Attributfunktion (attr) den Objekten Farben zugewiesen.
Jedem SVG-Objekt können Attribute wie Farbe, Drehung, Strichfarbe und -größe 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. Das Zeichnen mit einem Pfad ist wie das Zeichnen mit einem Stift auf einem riesigen Stück Millimeterpapier. Sie können festlegen, dass der Stift vom Papier abgehoben und an eine andere Position bewegt werden soll(move to), eine Linie(line to) oder eine Kurve(arc to) gezeichnet werden soll. Mit Pfaden können in SVG-Dateien unabhängig von der Skalierung Objekte mit demselben Detaillierungsgrad erstellt werden. Wenn Sie eine Anweisung zum Zeichnen einer Kurve geben, berücksichtigt SVG die ursprüngliche und die gewünschte Endgröße der Kurve (nach dem Skalieren) und berechnet mathematisch die Zwischenpunkte, um eine glatte Kurve zu rendern.
Der Code und die Abbildung unten zeigen ein Rechteck und eine geschlossene Kurve, die mit Pfaden gezeichnet wurden. Mit dem Buchstaben „M“ gefolgt von Koordinaten wird der Stift an diese Position bewegt. Mit „L“ gefolgt von einem Koordinatenpaar wird eine Linie von der aktuellen Position zu dieser Position gezeichnet. Mit „s“ wird eine glatte Bezierkurve mit einem bestimmten Kontrollpunkt und Endpunkt mit relativen Koordinaten gezeichnet. Mit „Z“ schließen Sie einen Pfad. Wenn Sie einen Großbuchstaben verwenden, wird der Befehl in der Regel mit absoluten Koordinaten ausgeführt. Bei Kleinbuchstaben werden relative Koordinaten verwendet. Mit M/m und Z/z wird jeweils derselbe Befehl für Groß- oder Kleinbuchstaben ausgeführt. Eine Liste aller Pfadbeschreibungen 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, Text zu zeichnen, wären wirklich langweilig. Glücklicherweise bietet Raphaël zwei Methoden zum Zeichnen von Text. Die erste Methode, „text“, nimmt X- und Y-Koordinaten sowie den zu zeichnenden String an. Bei der Textmethode haben Sie nur wenig Kontrolle über die Schriftart oder andere Effekte. Dabei wird die Standardschrift mit der Standardgröße verwendet.
Bei der zweiten Methode, „print“, wird der Text als Sammlung von Pfaden gezeichnet. So können wir einzelne Buchstaben ändern. Im folgenden Beispiel haben wir die Zahl 5 orange und „ROCKS“ blau eingefärbt und den Strich dicker gemacht, um fetten Text zu simulieren. Dazu haben wir eine benutzerdefinierte Schriftart mit einer Schriftgröße von 40 Punkten 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 nicht in Raphaël enthalten, ebenso wenig wie andere Schriftarten. Außerdem verwenden die meisten Schriftarten das TrueType- (TTF) oder OpenType- (OTF) Format. Damit diese Formate für Raphaël verwendet werden können, müssen wir sie mit dem Tool Cufon konvertieren. Mit Cufon können Sie die verschiedenen Schriftstile einer bestimmten Schriftart (normal, fett, kursiv, fett kursiv usw.) zur Verwendung mit Raphaël exportieren. Eine detaillierte Beschreibung von Cufon würde den Rahmen dieses Tutorials sprengen. Weitere Informationen finden Sie unter dem oben genannten Link. Eine gute Quelle für kostenlose Schriftarten für Ihre Anwendungen ist das Google Font Directory.
Ereignisse
SVG-Elemente können alle traditionellen mausbasierten Ereignisse direkt abonnieren: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup und hover. Mit Raphaël können Sie dem Canvas oder einzelnen Elementen eigene Methoden hinzufügen. Theoretisch steht also nichts im Wege, Touch-Gesten für mobile Browser hinzuzufügen.
Im folgenden Snippet wird eine Funktion gebunden, um einen bestimmten Buchstaben in „ROCKS“ um 45 Grad zu drehen, wenn darauf 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 beide Methoden zum Zeichnen von Objekten auf dem Bildschirm verwendet werden, ist oft nicht sofort klar, warum Sie die eine Methode anstelle der anderen verwenden sollten. Die beiden Medien haben sehr unterschiedliche Ansätze. Canvas ist eine Immediate-Mode-API, die dem Zeichnen mit Buntstiften ähnelt. Sie können einen Teil der Zeichnung löschen oder entfernen, aber einen vorherigen Strich standardmäßig nicht rückgängig machen oder ändern. Canvas ist auch eine Raster-Bitmap, daher kommt es beim Skalieren von Bildern sehr schnell zu Pixelfehlern. SVG hingegen kann, wie bereits erwähnt, mit mehreren Auflösungen mit demselben Detaillierungsgrad ausgeliefert werden und kann gescriptet werden.
Die Entscheidung, ob SVG oder Canvas für die Spieleprogrammierung verwendet werden soll, ist ziemlich einfach. Neben den üblichen Einschränkungen, die sich daraus ergeben, ob Sie die Bereitstellung für Computer oder Mobilgeräte planen, kommt es vor allem auf die Sprite-Anzahl an. SVG eignet sich für sogenannte Low-Fidelity-Spiele. Ich beschreibe diese als Spiele mit begrenzter gleichzeitiger Bewegung von Objekten sowie dem Entfernen und Erstellen von Sprites. Viele Brettspiele wie Schach, Dame oder Schiffe versenken sowie Kartenspiele wie Blackjack, Poker und Rommé gehören in diese Kategorie. Ein weiterer gemeinsamer Nenner ist, dass in vielen dieser Spiele ein Spieler ein beliebiges Objekt verschieben muss. Die Scriptbarkeit von SVG macht die Objektauswahl einfach.
Authoring-Tools für SVG
Die Verwendung von SVG bedeutet nicht, dass Sie Pfade manuell erstellen müssen. Es gibt mehrere Tools, sowohl Open-Source- als auch kommerzielle, mit denen Sie in SVG exportieren können. Die beiden Tools, die ich intensiv verwendet habe und die ich sehr empfehlen kann, sind Inkscape und svg-edit.
svg-edit
svg-edit ist ein browserbasierter SVG-Editor, der in JavaScript geschrieben wurde. Es bietet eine eingeschränkte Benutzeroberfläche, die an GIMP oder MS Paint erinnert. Sofern der Detaillierungsgrad nicht relativ gering war, habe ich mit svg-edit hauptsächlich SVG-Zeichnungen angepasst, anstatt sie zu erstellen. Mit svg-edit können Sie Objekte grafisch oder mit SVG-Code erstellen.
Inkscape
Inkscape ist ein plattformübergreifender, vollwertiger Vektorgrafikeditor, ähnlich wie CorelDraw, Adobe Illustrator und Xara. Inkscape profitiert von einer aktiven Plug-in-Community und einer ausgereiften Codebasis. Der Vorgänger von Inkscape, von dem Inkscape abgeleitet wurde, wurde 1999 entwickelt. Inkscape ist meine bevorzugte Anwendung für vektorbasierte und Bitmap-Assets.
Eine kleine Bemerkung
SVG wird unter Windows in Internet Explorer-Versionen vor IE9 nicht unterstützt. Der IE verwendet ein Vektorgrafikformat namens VML (Vector Markup Language), das viele der Funktionen von SVG bietet. Mit Raphaël können Sie Szenen erstellen, die SVG oder VML verwenden, sofern dies unterstützt wird. Mit Raphaël können Sie ganz einfach plattformübergreifenden Support anbieten.
Verweise
- Rapahël.js: http://raphaeljs.com
- Raphaël-Dokumentation: http://raphaeljs.com/reference.html