201127Jun

Paper.js: Vektorgrafiken im Browser mit JavaScript

Frameworks für HTML5 gibt es mittlerweile sehr viele. Auch speziell für das Canvas-Element gibt es diverse Erweiterungsbibliotheken wie etwa Easel oder Gury. Die Darstellung von Vektorgrafiken wird immer beliebter, da die Möglichkeiten durch moderne Browser und das Canvas-Element nahezu endlos sind. Wie die Arbeit mit SVG-Daten im Browser aussehen kann, zeigte kürzlich das jQuery-Plugin jVectorMap.
Für erweitertes Vektor-Scripting eignet sich hingegen ein Framework wie Paper.js: Basierend auf der bekannten Illustrator-Scripting-Umgebung Scriptographer bietet das Paper-Framework umfangreiche Funktionen, um mit relativ wenig Code beachtliche Ergebnisse zu erzielen.

Paper.js

Während die aufwendige Pfad-Animation auf der Startseite von Paper.js noch etwas rechenintensiv sein kann, dürften die etlichen Beispiele schon eher überzeugen.
Paper.js kommt mit einem eigenen Document Object Model, verschachtelten Ebenen, Gruppen, zusammengesetzten Pfaden, Symbole und weiteren nützlichen Eigenschaften. Zudem steht mit "PaperScript" eine Erweiterung von JavaScript zur Verfügung, wodurch eine Ausführung der Skripte in eigenen Scopes ermöglicht wird. Dadurch bleibt der globale Geltungsbereich unangetastet und mehrere Skripte auf einer Seite können unabhängig voneinander ablaufen. Das Vektor-Framework überzeugt auf der ganzen Linie und sollte von interessierten Entwicklern unbedingt ausprobiert werden. Ein Blick in die Feature-Liste lohnt sich ebenfalls.