EaselJS: Getting Started

Unten ist ein HTML document, reduziert auf ein paar Elemente, die uns interessieren.

Das Script Tag in Zeile 4 integriert die EaselSJ Libray im Document, so dass man damit arbeiten kann. Wir haben ein paar Optionen wie man das machen kann:

1. Link zu einer lokalen Copy der kompilierten Bibliothek (wie in diesem Beispiel)
2. Link, zu einer kompilierten Bibliothek auf der CreateJS CDN. Damit wird ermöglicht, dass die Bibliothek über alle Sites, die die Bibliothek nutzen, gecached wird, jedoch sind nur stabile Versionen der Bibliothek erreichbar.
3. Link zu individueller, unkompilierter Quelldatei (in der /src/ directory). Das kann für das Debugging und das Erlernen der Bibliothek sehr nützlich sein, denn es gibt mehr nützliche Errors. Jedoch müssen Sie sicher sein, dass sie in der korrekten Reihenfolge geladen werden. Das findet man unter /build/build.js

Das Script Tag in Zeile 5 enthält eine leere Funktion die aufgerufen wird, wenn die Seite geladen wird. In Zeile 7 kommt das Javascript rein, dass wir ein bisschen später schreiben.

Das canvas Tag in Zeile 12 hat eine id, so dass man leicht darauf verweisen kann, und es gibt eine definierte Breite und Höhe. Es ist wichtig, dass width und height Attribute in Pixel im canvas gesetzt werden. Wenn Sie die width und heigth mit CSS verändern, wird das die canvas skalieren und die Grafiken können hakelig und pixelig aussehen.

Lasst uns etwas Code in den leere Script tag oben einfügen. Wir beginngnen damit eine Bühne (stage) zu definieren, welche die canvas zeichnet.

Diese Zeile erzeugt eine neue Stage und verweist auf unsere canvas. Die stage beinhaltet alle display objects, die wir auf der canvas zeichnen. Sie können entweder die ID der canvas, die man benutzen möchte, übergeben, oder auf sie verweisen.

Sie werden bemerken, dass sich die Stage Klassen Definition im createjs namespace befindet. Das verhindert die Kollision aller Klassen von CreateJS mit anderen Klassen. Sie können den namespace konfigurieren, wenn Sie wollen, verweisen sie die createjs var woanders hin, bevor sie die Bibliothek laden.

Als nächste erzeugen wir ein Shape Objekt, weisen es an einen roten Kreis (circle) zu, zeichnen, positionieren es und fügen es der stage hinzu.

Zeile 1 erzeugt eine neue Shape Instanz. Shapes sind display Objekte, die Vektor Grafiken zeichnen. Alle Display Objekte teilen gemeinsame Eigenschaften für Positionierung und Transformation auf der canvas, wie x & y auf Zeile 3 & 4.

Shapes haben spezielle Eigenschaften, die graphics genannt werden. Sie verweisten auf eine Graphics Instanz, welche alle Methoden enthält, die wir benötigen um Vektor Grafiken zu definieren. In diesem Fall sagen wir dem graphics object einen circle mit einem Radius von 50 zu zeichnen und auf 0,0 zu zentrieren (relativ zur Position des Shape) und wir füllen es mit red.

Damit ein display object gezeichnet wird, müssen wir es der Bühne hinzufügen, wie man in Zeile 5 sieht.

EaselJS unterstütz shortcuts, um die Aufrufe zusammenzufassen. In der Tat, wenn Sie es wollen, könnten sie den gesamten obigen Code in einer einzigen Zeile schreiben. stage.addChild(new createjs.Shape()).setTransform(100,100).graphics.f("red").dc(0,0,50);

Wir haben die Display Liste zusammengestellt, aber sie wird noch nicht auf die canvas gezeichnet, bis wir der stage den update Befehl erteilen

Das sagt der stage, die canvas zu löschen, durch alle child Elemente zu laufen und diese auf die canvas zu zeichnen. Man kann die laufenden Demo unten sehen. Öffnen Sie diese und untersuchen Sie den kompletten Code.