Essentielles JavaScript: Die fünf wichtigsten Grafikbibliotheken
Erst kürzlich konnten wir JavaScript für grafische Arbeiten wie das Zeichnen von Diagrammen oder vielleicht sogar HTML5-Spielen in Betracht ziehen. Bessere JavaScript-Engines und eine ständig verbesserte Browserunterstützung (insbesondere die Arbeit in der V8-Engine von Chrome) machen JavaScript zu einer praktikablen Option für viele grafische Arbeiten. Heute werde ich mir fünf Bibliotheken ansehen, die Ihnen in diesem Bereich helfen sollen, sowie solche, die die Arbeit mit dem HTML5-Canvas-Element erleichtern.
Wenn Sie mit dem Canvas-Element noch nicht vertraut sind, empfehlen wir Ihnen dringend, sich mit ihm vertraut zu machen, bevor Sie eine Bibliothek verwenden, um es einfacher zu machen. Wenn Sie wissen, wie man etwas auf die harte Tour macht, können Sie besseren Code schreiben, selbst wenn Sie eine Bibliothek verwenden. Remy Sharp hat eine gute geschrieben Einführung in HTML5 Doctor Das sollte Ihnen den Einstieg erleichtern und Links zu weiteren Ressourcen enthalten, sobald Sie die Einführung durchgearbeitet haben.
D3.js
Das erste ist D3.js , die sich selbst als 'JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf Daten' beschreibt. Einige der Beispiele sind sehr beeindruckend; von einem Karte der Vereinigten Staaten zu detailliert Aufzählungszeichen . Mit D3 können Sie datengesteuerte Transformationen auf ein Dokument anwenden. Es wird häufig für Datenvisualisierungen verwendet und viele Tutorials wurden darüber geschrieben. D3 ist keine spezielle Grafikbibliothek, sondern bietet Ihnen lediglich die Werkzeuge zum Erstellen von Grafiken. Das folgende Beispiel zeigt ein gestapeltes Balkendiagramm. Es ist nicht überraschend, dass um D3 herum Bibliotheken entstanden sind, um das Erstellen von Diagrammen zu vereinfachen, von denen das beliebteste ist NVD3 , eine Bibliothek, die von D3 abhängt und die das Erstellen komplexer Diagramme sehr einfach macht. Ich würde Sie ermutigen, zuerst die grafische Darstellung mit D3 zu versuchen, bevor Sie eine Bibliothek wie NVD3 ausprobieren. NVD3 ist großartig, aber das Erstellen von Diagrammen mit reinem D3 ermöglicht ein höheres Maß an Anpassung und natürlich mehr Kontrolle.
BonsaiJS
Der nächste ist BonsaiJS , eine JS-Grafikbibliothek mit beeindruckenden Demos wie a funktionierendes Pong-Spiel und ein interaktives Kreisdiagramm . Bonsai unterscheidet sich von D3 darin, dass es nicht durch Interaktion mit HTML funktioniert, sondern alles über JavaScript. Was auch an Bonsai großartig ist, ist das Online-Editor , mit dem Sie einfach mit Bonsai herumspielen und sofort die Ergebnisse sehen können. Während die Syntax von D3 in Bezug auf die Interaktion mit Elementen häufig jQuery ähnelt, erstellen Sie mit Bonsai Elemente über JavaScript, und Bonsai fügt sie automatisch der Seite für Sie hinzu. Sowohl Bonsai als auch D3 sind sehr mächtig, gehen aber etwas anders vor.
Raphael
Raphael ist eine kleine Bibliothek, die das Arbeiten mit Vektorgrafiken im Web vereinfachen soll. Es erlaubt auch komplexe Diagramme und Visualisierungen und arbeitet durch Zeichnen von SVG-Elementen. Ein Plus für Raphael ist, dass es eine bessere Browserunterstützung bietet und IE6 und höher unterstützt, während Bonsai und D3 ältere Versionen von Internet Explorer nicht unterstützen. Ein Nachteil von Raphael ist jedoch, dass der Quellcode vor 11 Monaten zuletzt aktualisiert wurde und daher etwas veraltet ist. Raphael bleibt eine sehr fähige Bibliothek und ist auf jeden Fall einen Blick wert. Eine meiner Lieblingsdemos ist Ben Barnetts U-Bahn-Karte , das mit Raphael die berühmte U-Bahn-Karte der Londoner U-Bahn nachbildet, zeigt die Leistungsfähigkeit der Bibliothek (Screenshot unten).
Three.js
Three.js ist etwas ganz anderes als die drei Bibliotheken, die ich bisher besprochen habe. Three.js wird verwendet, um 3D-Grafiken zu erstellen, häufig durch WebGL . Es ist zu unglaublichen Dingen fähig, wie dieser Sportwagen (Bild unten) Da es jedoch ressourcenintensiv ist und WebGL verwendet, ist die Browserunterstützung derzeit offensichtlich eingeschränkt. Sie benötigen gute Kenntnisse in 3D-Grafiken, um effizient mit Three.js arbeiten zu können. Es gibt jedoch gute Tutorials, darunter a gute einführung zur Bibliothek. Three.js implementiert Shader, Kameras, Animationen und vieles mehr.
Staffelei
Wenn Sie nach einer Bibliothek suchen, die eher als Wrapper für die Arbeit mit dem Canvas-Element fungiert, Staffelei Vielleicht ist es mehr in Ihrer Straße, besonders wenn Sie einige Spiele bauen möchten. Es ist fähig zu Neuerstellung des klassischen Asteroids-Spiels oder Benutzer können auf eine Leinwand zeichnen . Staffelei kommt mit umfassende API-Dokumentation . EaselJS hat sich stark von Flash für seine Klassennamen inspirieren lassen. Wenn Sie also mit Flash vertraut sind, ist Easel noch einfacher zu erlernen.
Einführende Tutorials, Dieses Video auf YouTube gibt eine gute Einführung und es gibt auch Links im Staffelei-Wiki zu mehr. Staffelei ist nicht wie D3 oder Bonsai - es ist eindeutig auf mehr Interaktion ausgelegt - Spiele, Drag & Drop-Schnittstellen usw. statt Datenvisualisierung. Es lohnt sich auch, das Ganze zu überprüfen CreateJS Suite , zu der Staffelei gehört. Dazu gehören TweenJS, eine Bibliothek zum Tweening (oder Animieren) von HTML5- und JavaScript-Eigenschaften, SoundJS zum Arbeiten mit Audio in JavaScript und PreloadJS, eine Bibliothek zum Verwalten des Vorladens von Assets. Der Screenshot oben zeigt die EaselJS-Version von Asteroids.
Das richtige Werkzeug auswählen
Mit der neuen Funktionalität, die uns als JavaScript-Entwickler zur Verfügung steht, werden die Anwendungsfälle für JavaScript ständig erweitert, und Entwickler nutzen dies, indem sie diese Bibliotheken wie die fünf zuvor genannten erstellen, um es noch einfacher zu machen. Einige der Demos dieser Bibliotheken, insbesondere ThreeJS, sind absolut umwerfend. Es ist noch nicht lange her, dass nichts davon möglich war.
Wie bei den anderen Artikeln in dieser 'Top JavaScript'-Reihe empfehle ich Ihnen, einige Bibliotheken auszuprobieren, bevor Sie sich für eine für Ihre Anwendung entscheiden. Jede Bibliothek hat einige Dinge, die sie gut macht, und vielleicht ein paar Schwachstellen, und die Auswahl der richtigen für den Job ist etwas, über das Sie sich Zeit nehmen sollten.
