7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Eine Einführung in die Raphael JS Library

Scroll to top
Read Time: 13 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Raphael JS ist ein leichtes und super sexy JavaScript-Framework, mit dem Sie Vektorgrafiken in Ihrem Browser zeichnen können! In diesem Tutorial werde ich Ihnen einige grundlegende Zeichenfunktionen vorstellen, einen Blick auf die Animation werfen, DOM-Zugriff gewähren und abschließend ein cooles Widget für Ihre Site erstellen...

Tutorial Details

  • Framework: Raphael JS
  • Version: 1.0
  • Schwierigkeit: Anfänger bis Fortgeschrittene
  • Geschätzte Fertigstellungszeit: 30 Minuten

1. Einrichten

Beginnen wir mit dem Herunterladen des Raphael JS-Frameworks von hier. Oben rechts auf der Seite sehen Sie komprimierte und unkomprimierte Kopien von Raphael Version 1.0. Ich würde empfehlen, dass Sie sich vorerst eine Kopie der unkomprimierten Quelle schnappen - auf diese Weise können Sie einen Blick auf die Quelle werfen und sehen, welchen zusätzlichen Vorteil Sie in der Dokumentation haben können.

Nachdem das heruntergeladen wurde, richten wir ein einfaches HTML-Dokument mit dem Namen index.htm ein und fügen Raphael hinzu. Wir fügen auch our_script.js hinzu, wo wir unser eigenes JavaScript schreiben und im Hauptteil des Dokuments ein minimal gestaltetes div mit der ID canvas_container erstellen, die als Container für unsere Zeichnungen dienen wird.

N.B. Die erste stabile Version 1.0 wurde erst am 7. Oktober 2009 veröffentlicht, ist also ziemlich neu. Es ist eine sehr wichtige Änderung an der Art und Weise, wie Sie Pfade zeichnen. Wenn Sie also eine frühere Version von Raphael verwenden, stellen Sie sicher, dass Sie ein Upgrade durchführen, und lesen Sie die Dokumentation zur Auswirkung der Abwärtskompatibilität.

2. Erstellen unserer Zeichenfläche

Wenn wir mit Raphael zeichnen, tun wir dies auf eine Leinwand. Diese Zeichenfläche, auf die wir in einer Variablen namens 'paper' verweisen, wird mit dem Raphael () -Objekt erstellt. Wir geben immer die Breite und Höhe der Leinwand an, haben aber die Möglichkeit, entweder a) die absolute Position der Leinwand relativ zum Ansichtsfenster oder b) ein Element 'Container' anzugeben, in das die Leinwand gezeichnet wird.

Ich bevorzuge im Allgemeinen die letztere Methode (b), da wir normalerweise wissen, wo unsere Divs sind. Warten Sie in our_script.js, bis das DOM geladen ist, und erstellen Sie dann eine 500 x 500 Pixel große Zeichenfläche in unserem canvas_container div:

Alle unsere Zeichenmethoden werden jetzt an die Papiervariable gebunden.

3. Eingebaute Formen

Nachdem wir unsere Leinwand haben, zeichnen wir einige Formen darauf. Der Ursprung, dh der Punkt x = 0, y = 0, befindet sich in der oberen linken Ecke von unsere Leinwand. Dies bedeutet, dass alle x, y-Koordinaten, die wir in unseren Methoden angeben, relativ zu diesem Punkt sind.

Zunächst ein Kreis. Ändern Sie our_script.js so, dass es so aussieht:

Dadurch wird ein Kreis mit einem Radius von 80 Pixel gezeichnet, dessen Mittelpunkt bei x = 100, y = 100 liegt. Wir können so viele Kreise zeichnen, wie wir möchten, und wir müssen sie nicht in einer Variablen referenzieren:

Als nächstes zeichnen wir ein Rechteck. Wir tun dies mit der rect()-Methode, die als Parameter verwendet wird: die x- und y-Koordinaten der oberen linken Ecke des Rechtecks und die gewünschte Breite und Höhe des Rechtecks.

Zum Schluss zeichnen wir eine Ellipse. Seine Parameter sind die gleichen wie der Kreis, d. H. X, y, Radius, außer dass wir x- und y-Radien spezifisch spezifizieren können.

Dies zeichnet eine Ellipse mit x-Radius = 100, y-Radius = 50 bei x = 200, y = 400. Unsere Datei our_script.js sollte nun folgendermaßen aussehen:

Wenn wir jetzt index.htm in unserem Browser öffnen, sollten wir eine Reihe von Formzeichnungen erhalten:

Beispiel hier

4. Pfade zeichnen

Während die eingebauten Formen praktisch sind, bieten uns Pfade echte Flexibilität beim Zeichnen. Beim Zeichnen von Pfaden ist es hilfreich, sich einen imaginären Cursor oder eine Stiftspitze vorzustellen, die gegen den Bildschirm gedrückt wird. Wenn wir unsere Leinwand erstellen, befindet sich der Cursor in der oberen linken Ecke. Das erste, was wir tun sollten, ist, den Cursor oder die Stiftspitze anzuheben und in einen geräumigen Bereich zu bewegen, in dem wir zeichnen können.

Bewegen wir als Beispiel unseren Cursor in die Mitte unserer Leinwand. Das heißt, bewegen wir es 250px in x-Richtung und 250px in y-Richtung.

Wir tun dies mit einer sogenannten Pfadzeichenfolge.

Eine Pfadzeichenfolge ist eine Zeichenfolge, die aus 'Aktions'-Befehlen und numerischen Werten besteht, die dem Befehl entsprechen. Wir bewegen unseren Cursor wie folgt auf x = 250, y = 250 Zeichenfolge:

'M' bedeutet, dass wir uns ohne Zeichnung bewegen möchten, gefolgt von x- und y-Canvas-Koordinaten.

Nachdem unser Cursor nun dort ist, wo wir ihn haben möchten, zeichnen wir eine Linie relativ zu diesem Punkt mit dem Kleinbuchstaben 'L', 'l'.

Dadurch wird eine Linie in y-Richtung um 50 Pixel nach oben gezogen. Schreiben wir eine Pfadzeichenfolge, die ein Tetris-Tetronimo zeichnet:

Der Befehl "z" kennzeichnet das Schließen des Pfades - er verbindet eine Linie von überall bis zu dem Punkt, der durch unseren anfänglichen "M"-Befehl angegeben wurde.

Wir weisen Raphael an, diesen Pfad tatsächlich mit der Methode path() zu zeichnen. Ändern Sie our_script.js so, dass es so aussieht:

Wenn Sie index.htm laden, sollte jetzt ein Tetronimo wie unten angezeigt werden:

Pfadzeichenfolgen können mithilfe von Kurven- und Bogenbefehlen unglaublich (brillant) komplex werden. Die vollständige Abdeckung der Pfade finden Sieauf der Seite SVG-Pfadspezifikation.

5. Attribut-Styling

Unser Tetris Tetronimo ist zwar wunderbar, aber nicht sehr ästhetisch. Wir werden das mit der attr()-Methode beheben.

Die Methode attr() verwendet ein Objekt, das aus verschiedenen Eigenschafts-Wert-Paaren besteht, als Parameter. Da wir in der Variablen tetronimo einen Verweis auf unser Tetronimo gespeichert haben, können wir diese Variable nehmen und die attr()-Methode hinzufügen. Wir könnten die attr()-Methode genauso gut mit der path()-Methode verketten, aber lassen Sie uns die Dinge vorerst gesund halten. Ich werde die Verwendung von attr() anhand eines Beispiels demonstrieren:

produziert dies:

produziert dies:

Die Raphael-Dokumentation ist ziemlich umfangreich, wenn es um die attr()-Methode geht. Probieren Sie die verschiedenen Kombinationen von Objekteigenschaften und -werten aus.

6. Animation

Die animate()-Methode in Raphael ist wirklich sehr, sehr gut. Es ermöglicht uns, unsere Zeichnungen auf jQuery-artige Weise zu animieren und die Attribute, die wir über einen bestimmten Zeitraum bereitstellen, mit einer optionalen Beschleunigung zu animieren.

Drehen wir unser aktuelles Tetronimo um 360 Grad. Das Rotationsattribut ist absolut, daher sollte es eine volle Umdrehung dauern und es wieder in seinen nicht gedrehten Zustand bringen.

Die Animation findet über 2 Sekunden (2000 Millisekunden) statt und wird angewiesen, mit einem "Sprung" in den Endzustand zu gelangen.

Beispiel hier.

Wir können auch eine Rückruffunktion als Argument angeben. Diese Rückruffunktion wird nach Abschluss der Animation aufgerufen. Das folgende Beispiel animiert die Rotation und Strichbreite des Tetronimos und setzt sich dann mit einer anderen Animation in der Rückruffunktion zurück.

Das Schlüsselwort this verweist innerhalb der Rückruffunktion auf das ursprüngliche Tetronimo.

Beispiel hier.

Animationspfade

Da ich ein bisschen wie ein Codefreak bin, habe ich es selten geschafft, einfache Formen in Flash zu zeichnen. Aber eine Sache, mit der ich gerne spielte, war das Form-Tweening. Gut, Raphael emuliert das Form-Tweening, indem es in der animate()-Methode eine Pfadzeichenfolge angibt.

Ein anderes Tetronimo, das Z-Tetronimo in Tetris, hat die folgende Pfadzeichenfolge:

und es sieht so aus:

Jetzt werde ich unter Verwendung unseres ursprünglichen Tetronimos mit minimalem Attributstil die neue Pfadzeichenfolge in unserer animate()-Methode angeben.

Sie sollten sehen, wie sich unser ursprüngliches Tetronimo in unser neues verwandelt. Der Effekt wird umso deutlicher, als als Lockerungstyp "elastisch" angegeben wird.

Beispiel hier.

7. Dom Zugänglichkeit

Wenn wir als DOM-Elemente auf unsere Elemente zugreifen möchten, können wir dies mit Leichtigkeit tun. Dies ist der Knoteneigenschaft zu verdanken. Auf diese Weise können wir unseren Zeichnungen Ereignishandler hinzufügen, die ich Ihnen dann zeigen werde.

Beginnen wir mit dem Zeichnen eines Kreises in unserer Datei our_script.js.

Fügen wir nun den Text "Bye Bye Circle!" Hinzu. so dass sein Mittelpunkt am gleichen Punkt liegt wie unser Kreismittelpunkt.

Ich habe die Deckkraft auf 0 gesetzt, damit sie zunächst ausgeblendet wird. Beachten Sie die Verkettung der toBack()-Methode. Dadurch wird der Text hinter allen anderen Zeichenelementen für die Leinwand platziert (ähnlich bringt toFront()-Elemente ganz nach vorne auf unsere Leinwand).

Fügen wir nun mithilfe der Knoteneigenschaft einen Mouseover-Ereignishandler zu unserem Kreis hinzu. Wir werden den Cursorstil auf "Zeiger" setzen.

Dadurch wird die Stileigenschaft des <circle>-Objekts in unserem Dokument festgelegt. Unser Dokument sieht folgendermaßen aus:

Fügen wir nun endlich einen Onclick-Ereignishandler zu unserem Kreis hinzu:

Wenn Sie auf den Kreis klicken, wird der Text, auf den wir im variablen Text verwiesen haben, über 2 Sekunden auf volle Deckkraft animiert. Der Kreis selbst wird im selben Zeitraum auf 0 Deckkraft animiert. Wir haben auch eine Rückruffunktion in die Animationsmethode des Kreises aufgenommen. Dadurch wird das Kreiselement nach Abschluss der Animation aus unserem Dokument entfernt, da der Kreis zwar 0 Deckkraft hat, aber bis zum Entfernen weiterhin anklickbar ist.

Beispiel hier.

8. Lassen Sie uns ein Widget erstellen

Lassen Sie uns zum Schluss zusammenfassen, was wir gelernt haben, und ein hübsches kleines Stimmungsmessgerät bauen. Grundsätzlich wählen Sie einen Stimmungswert zwischen 1 und 5, wobei 1 "Müll" und 5 "positiv manisch" ist, und Raphael erstellt eine schöne Darstellung davon.

Sehen Sie sich das Widget hier an

Ändern Sie zunächst our_script.js so, dass es so aussieht:

Dadurch wird ein Kreis mit einem Radius von 20 Pixel in der Mitte unserer Leinwand und ein Text über dem Kreis mit der Aufschrift "My Mood" erstellt. 'Mood' wird mit '\ n' in eine neue Zeile gesetzt.

Dann erstellen wir einige benutzerdefinierte Informationen, die unseren Stimmungen entsprechen, und wählen aus, in welcher Stimmung wir uns befinden.

Die Textbeschreibung unserer Stimmung wird in einem Array namens "Stimmungen" gespeichert, und die dieser Stimmung entsprechende Farbe wird in einem Array namens "Farben" gespeichert. Die gewählte Stimmung, ein Wert zwischen 1 und 5, wird in der Variablen my_mood gespeichert.

Jetzt erstellen wir eine Funktion namens show_mood. Wenn diese Funktion aufgerufen wird, werden unsere Stimmungskreise (die farbigen Kreise) und der dieser Stimmung entsprechende Text angezeigt.

In show_mood() haben wir eine Schleife, die so oft iteriert wie der Wert von my_mood. In dieser Schleife befindet sich eine selbstausführende anonyme Funktion. Dies ist notwendig, damit wir in jeder Phase der Iteration Zugriff auf die Variable i haben. Innerhalb der selbstausführenden Funktion erstellen wir eine Zeitüberschreitung - alle 50 * i Sekunden wird am Punkt unseres ursprünglichen Kreises ein Kreis erstellt. Jeder Kreis wird dann über 2 Sekunden in 0px in x und ein Vielfaches von -42px in y übersetzt. Wir stellen sicher, dass jeder nachfolgende Kreis auf der Rückseite der Leinwand platziert wird. Beachten Sie, dass die Kreise entsprechend der Farbe im Farbarray gefüllt werden, die von my_mood bestimmt wird.

show_mood() ist auch für die Anzeige unseres Stimmungstextes verantwortlich, der my_mood verwendet, um die entsprechende Stimmung aus dem moods_array auszuwählen.

show_mood() entfernt dann endlich alle Onclick-Ereignishandler, die dem ursprünglichen Text und Kreis zugeordnet sind, den wir in der Mitte der Zeichenfläche platziert haben. Dies verhindert das erneute Zeichnen von Stimmungskreisen.

Lassen Sie uns abschließend dem mittleren Kreis und dem Text "Meine Stimmung" Ereignisbehandlungsroutinen mit einem Klick zuweisen. Ich weise beiden Elementen Ereignishandler zu, sodass durch Klicken auf den Text oder den Kreis show_mood() aufgerufen wird.

Abschluss

Das war schon zu Ende! Sie sollten jetzt eine solide Plattform haben, auf der Sie Ihre Erkundungen auf das Raphael JS-Framework stützen können. Vor allem hoffe ich, dass Sie jetzt gerne in Raphael JS eintauchen und einige schöne Browserzeichnungen und Widgets erstellen möchten. Vergessen Sie nicht, mir auf Twitter zu folgen und Ihre Ideen zu teilen.

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.