Plattformübergreifende Animationen und Grafiken mit Paper.js

Vektorbasiertes Framework für JavaScript
Kommentare

Paper.js ist ein JavaScript-Framework, das die Möglichkeiten von HTML5 verwendet, um vektorbasierte Grafiken mit JavaScript zu erstellen. Dieses Framework erlaubt es, plattformübergreifende Animationen und Grafiken zu erstellen. In diesem Artikel werden die Möglichkeiten von Paper.js vorgestellt.

Mit HTML5 kommt eine Menge an neuen Möglichkeiten auf uns Entwickler zu. Erstmals soll es möglich sein, eine Anwendung einmal zu schreiben und auf allen Geräten laufen zu lassen (wobei dies wohl eher nach wie vor ein Wunschdenken bleiben wird). Paper.js funktioniert über das HTML5-Canvas-Element. Es ist ein JavaScript-Mikroframework, das das Zeichnen und Animieren von Vektoren erlaubt (Abb. 1). Paper.js setzt sich aus einem Szenengrafen und dem Dokumentenobjektmodell (DOM) zusammen und bietet eine ganze Reihe an Möglichkeiten für Vektorgrafiken. Wie vermutlich viele annehmen, orientiert es sich aber nicht an Silverlight, sondern basiert hauptsächlich auf Scriptographer, dass von Adobe Illustrator kommt.

Abb. 1: Paper.js: Einfache Voronoi-Berechnungen als Vektoren dargestellt
Abb. 1: Paper.js: Einfache Voronoi-Berechnungen als Vektoren dargestellt

Das höchste Element in einem Paper.js-Skript ist immer das Project-Objekt. Dies repräsentiert das gesamte Objekt, das durch den Szenengrafen aufgebaut wird. Ein weiteres wichtiges Objekt ist das View-Objekt, das scrollen und andere Operationen auf die sichtbaren Bereiche erlaubt. Für Maus-Interaktionen gibt es die Tool-Klasse, die Ereignisse (Events) der Maus oder des Keyboards verwendet. Somit ist es einfach möglich, diese Eingabegeräte in Paper.js zu verwenden. Wichtig ist auch noch die Eigenschaft, dass Paper.js nicht wie üblich durch type=“text/javascript“ eingeleitet wird, sondern ein eigenes Tag für PaperScript verwendet. Wie dies genau aussieht ist in Listing 1 ersichtlich.

Listing 1

  
Die erste Zeichnung

Nun wollen wir unsere erste Zeichnung in Paper.js erstellen. Hierfür muss die Library in das HTML-Dokument eingebunden werden. Der Link zum Download der Library ist unter [1] enthalten. Was ebenfalls benötigt wird, ist das HTML-Canvas-Element. Dieses Element, das im HTML-Body eingefügt wird, bekommt den Namen paperJsDrawing und wird im Skript mit dem PaperScript-Attribut ebenfalls eingebunden. Wie dies funktioniert, wurde bereits in Listing 1 dargestellt. Das Canvas ist jenes Element, in dem gezeichnet wird. Damit es sich an die aktuelle Größe des Browserfensters anpasst, wird hierfür das Attribut resize gesetzt. Ein sehr einfaches Element für das Zeichnen von Paper.js-Objekten ist der Pfad. Ein Pfad-Objekt wird durch die Klasse Path repräsentiert. Wurde der Pfad initialisiert, so kann man hier verschiedenste Eigenschaften setzen.

Ein einfaches Beispiel wäre die Farbe, die nun auf ‚black‘ gesetzt wird. Die Eigenschaft hierfür heißt strokeColor. In PaperScript gibt es verschiedene weitere Klassen, die das Arbeiten mit Grafiken vereinfachen sollen. Das ist beispielsweise die Klasse Point. Wollen wir jetzt tatsächlich etwas zeichnen, so wollen wir an einem bestimmten Punkt auf der Zeichenfläche damit beginnen. Dieser Punkt hat die Koordinaten 100, 100. Wir erstellen uns ein neues Objekt vom Typ Point und setzen diese Koordinaten ein. Doch alleine damit ist noch nichts gezeichnet, da das Pfad-Objekt nichts von diesem Punkt weiß. Der Punkt muss dem Objekt übergeben werden. Zeichnet man ein Objekt, so wird der erste Punkt für den Zeichenvorgang üblicherweise mit dem Befehl moveTo angegeben. Eine Stärke von Paper.js ist, wie einfach es möglich ist, Koordinaten zu transformieren. Will man sich auf der X-Achse um 100 Punkte weiterbewegen und auf der Y-Achse um 50 Punkte weiter bewegen, so geschieht dies einfach durch eine Addition der neuen Punkte. Einen neuen Punkt kann man in der Berechnung auch mittels [100, -50] angeben. Die Erstellung mittels new Point ist gar nicht erst nötig. Listing 2 demonstriert diese Fähigkeit. Das Ergebnis von Listing 2 ist in Abbildung 2 dargestellt.

Listing 2








    

  

Abb. 2: Unsere erste Paper.js-Zeichnung
Abb. 2: Unsere erste Paper.js-Zeichnung
Nun kommt die Maus ins Spiel...

Paper.js wäre wohl nur halb so interessant, wenn es nicht ein sehr mächtiges API für Geräte, wie etwa Maus und Tastatur gäbe. Neben Maus und Tastatur funktioniert der Finger als Zeigegerät für Tablets im Übrigen auch sehr gut. Nun wollen wir jedoch auf einige Mauseingaben reagieren. Hierfür gibt es einige Ereignisse (Events), die uns diese Art der Interaktion ermöglichen. In diesem Artikel möchten wir uns vor allem die Events onMouseDown und onMouseDrag ansehen. Beide Events haben einen Parameter event, womit die Position des Mauszeigers bestimmt werden kann. Die Position ist in point gespeichert. Will man herausfinden, wohin der Benutzer geklickt hat, so kann die Position durch event.point abgefragt werden. In Listing 3 wird dargestellt, wie man den in Listing 2 erstellten Pfad erweitern kann.

Listing 3

function onMouseDown(event) {
        path.add(event.point);
    }  

Ähnlich wie in Listing 3 funktioniert auch die Funktion onMouseDrag. Hierbei besteht jedoch der Unterschied, dass man erst dann etwas zeichnen will, wenn der Benutzer die Mausbewegung durch einen Mouse Up erledigt hat (Abb. 3). Während der Benutzer die Maus bewegt, soll der Pfad um die aktuelle Position erweitert werden. Wichtig ist auch, dass das Pfad-Segment immer nur auf die aktuelle Position geht und nicht viele verschiedene Positionen gezeichnet werden. Dies funktioniert, indem man das letzte Segment eines Pfades verändert. Listing 4 stellt dies dar.

Listing 4

    function onMouseDrag(event) {
        path.lastSegment.point = event.point;
    }  

Abb. 3: Auf Mauseingaben reagieren
Abb. 3: Auf Mauseingaben reagieren
Fazit

Paper.js bietet sehr interessante Möglichkeiten hinsichtlich der grafischen Erstellung von Objekten mit JavaScript. Von besonderem Interesse dürfte die Plattformunabhängigkeit sein, da Paper.js sowohl auf Linux, Windows und Mac läuft. Außerdem sind Paper.js-Anwendungen auf iOS (iPad, iPhone und iPod), Android und Windows Phone lauffähig. Dies macht Paper.js gegenüber Silverlight oder Flash einzigartig, da keine der beiden RIA-Technologien alle diese Plattformen unterstützt. Das Paper.js-API ist ferner sehr einfach verwendbar.

Mario Meir-Huber ist Technical Director bei CodeForce, einem ITConsulting- und Services-Unternehmen mit Hauptsitz in Wien. In dieser Rolle beschäftigt er sich primär mit neuen Technologien und ihrer Anwendung in Unternehmen. Sein Fachwissen gibt Mario Meir-Huber auf zahlreichen Konferenzen, in Magazinbeiträgen und Blogartikeln weiter. Technologisch interessiert er sich vorrangig für Cloud Computing und Natural User Interfaces. Vor allem im Bereich Cloud Computing ist die sinnvolle Anwendung solcher Plattformen in Unternehmen sein zentrales Interesse.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -