AnimateCC, Canvas TweemJS Tipp TweenJS Api EaselJS Adobe Help
Auch die programmatische Erstellung von Grafiken wie Kreisen, Rechecken, Linien etc. wird in EaselJS auf ähnliche Weise programmiert wie in Actionscript 3. Siehe dazu meine AS3 Beispiele.
Siehe auch diese Seite
Ein Graphic Objekt wird einem Shape Objekt zugewiesen, dazu gibt es verschiedene Möglichkeiten.
Das Shape Objekt ruft die Eigenschaft graphics auf.
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
Ein Graphic Object wird initialisiert und dem Shape Objekt als Parameter der Konstruktorfunktion zugewiesen
var recGraph = new createjs.Graphics().beginFill("rgba(100,0,255,1)").rect(5,5,80,80);
var recShape = new createjs.Shape(recGraph);
stage.addChild(recShape);
Oder man erstellt das neue Graphics Objekt als Parameter des Shape Objekts.
var recShape = new createjs.Shape(new createjs.Graphics().beginFill("rgba(100,0,255,1)").rect(5,5,80,80));
stage.addChild(recShape);
Oder man weist das Graphics Objekt der Eigenschaft graphics als Wert zu.
var recGraph = new createjs.Graphics().beginFill("rgba(100,0,255,1)").rect(5,5,80,80);
var recShape = new createjs.Shape();
recShape.graphics = recGraph;
stage.addChild(recShape);
Siehe weitere Api Beispiele
Wenn man eine Füllung und einen Rand zuweisen will, kann man folgendermaßen vorgehen:
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginFill("grey");
g.drawRect(20, 20, 200, 100);
var bg = new createjs.Shape(g);
this.addChildAt(bg);
Jedes Graphics Objekt erzeugt ein Command Objekt. Siehe Dokumentation
Man hängt dieses command hinten an und kann dann auf die Eigenschaften dieses Command Objekt zugeifen. Lasse dir mit console.log(fillCommand); die Eigenschaften ausgeben, um zu wissen, was du verändern kannst.
var g = new createjs.Graphics();
g.setStrokeStyle(1);
var strokeCommand = g.beginStroke("#000000").command;
var fillCommand = g.beginFill("red").command;
g.drawCircle(0, 0, 30);
var shape = new createjs.Shape(g);
stage.addChild(shape);
shape.addEventListener("click", changeColor);
function changeColor(evt) {
fillCommand.style = "rgb(0,200,156)";
}
Es lassen sich alle CSS Farbwerte als String einsetzen. In folgender Funktion ändert sich der Farbton.
var hue= 0;
shape.addEventListener("tick", changeColor);
function changeColor(evt) {
if (hue < 360) {
hue += 2;
} else {
hue = 0;
}
fillCommand.style = "hsl(" + hue + ",100%,50%)";
strokeCommand.style = "hsl(" + (hue + 30) + ",100%,50%)";
}
mittels gradientFill kann man einen Verlauf bestimmen, Farben, Position der Farben, Richtung des Verlauf. Sie dazu das Beispiel linearGradientFill
In diesem Beispiel kann man Start und Endpunkt des Verlaufs mit der Maus aufziehen. Eine Funktion, die man in Zeichenspielen oder T-Shirt Desigenern gebrauchen kann.
Im folgenden Beispiel wird eine Quadratic Curve gezeichnet. Die roten Punkte markieren die definierten Punkte in der Funktion. Die Punkte von oben nach unten und in der Funktion der Reihe nach. x= 100, y=10 / x= 300, y = 200 / x = 100, y = 390
var g = new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)")
.moveTo(100, 10).quadraticCurveTo(300,200,100,390).endStroke();
var myShape = new createjs.Shape(g);
this.addChild(myShape);
Hier wird eine geschwungene Linie gezeichnet, die 2 Biegungen hat. Die Punkte werden durch die Positionen der Movieclips definiert. p1, p2, p3, p4
var stroke_color = "#ff0000"; var shape = new createjs.Shape(); var g = new createjs.Graphics(); g.setStrokeStyle(1); g.beginStroke(stroke_color); g.moveTo(this.p1.x, this.p1.y); g.bezierCurveTo(this.p2.x, this.p2.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y); g.endStroke(); //shape.graphics.clear(); shape.graphics = g; this.addChild(shape);
Verschiebe die Punkte im folgendem Beispiel. Siehe auch den Tipp Drag & Drop
var stroke_color = "#ff0000";
var shape = new createjs.Shape();
this.p1.addEventListener("pressmove", dragMe.bind(this));
this.p2.addEventListener("pressmove", dragMe.bind(this));
this.p3.addEventListener("pressmove", dragMe.bind(this));
this.p4.addEventListener("pressmove", dragMe.bind(this));
function dragMe(evt) {
var p = this.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = p.x;
evt.currentTarget.y = p.y;
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke(stroke_color);
g.moveTo(this.p1.x, this.p1.y);
g.bezierCurveTo(this.p2.x, this.p2.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y);
g.endStroke();
shape.graphics.clear();
shape.graphics = g;
this.addChild(shape);
}
Hier wird aus den beiden vorigen Beispiele eine Animation erzeugt indem die beiden Punkte, welche die Biegung bestimmen eine Kreisbewegung vollziehen. Siehe dazu auch meinen Tipp Kreisbewegung.
Ich habe für die Punkte die Position der MC Instanzen gewählt, um das Beispiel anschaulicher zu machen. Stattdessen könnte man auch einfach die Point Klasse einsetzen.
var p1 = new createjs.Point(0, 0);
Für die Drehung ist die Sinus- und Cosinusfunktion verantwortlich. Im folgenden Beispiel ist der Wert 50 der Radius, der Kreisbewegung und 100 die y-Position des Mittelpunkts.
this.p2.y = Math.cos(i) * 50 + 100;
var stroke_color = "#ff0000";
var shape = new createjs.Shape();
var i = 0;
this.addEventListener("tick", progRotate.bind(this));
function progRotate() {
i += 0.09;
this.p2.y = Math.cos(i) * 50 + 100;//y
this.p2.x = Math.sin(i) * 50 + 100;//x
this.p3.y = Math.cos(i) * 100 + 200;//y
this.p3.x = Math.sin(i) * 100 + 300;//x
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke(stroke_color);
g.moveTo(this.p1.x, this.p1.y);
g.bezierCurveTo(this.p2.x, this.p2.y, this.p3.x, this.p3.y, this.p4.x, this.p4.y);
g.endStroke();
shape.graphics.clear();
shape.graphics = g;
this.addChild(shape);
}
Hier werden mehrere Linien in einer for Schleife erzeugt. Die Positionen werden mittels der Zählvariablen etwas versetzt.
var anzahl = 10;
var shapes = new Array();
for (var i = 0; i < anzahl; i++) {
shapes[i] = new createjs.Shape();
stage.addChild(shapes[i]);
}
for (var i = 0; i < anzahl; i++) {
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#ff0000");
g.moveTo(200 + i * 30, 0);
g.bezierCurveTo(50 + i * 10, 30 * i, 100 + i * 20, 300, 250 + i * 10, 400);
g.endStroke();
shapes[i].graphics.clear();
shapes[i].graphics = g;
this.addChild(shapes[i]);
}
In diesem Beispiel werden die beiden vorigen Beispiele kombiniert.
var stroke_color = "#fff";
var i1 = 0.1;
var i2 = 0.24;
var p1 = new createjs.Point(250, 0);
var p2 = new createjs.Point(250, 0);
var p3 = new createjs.Point(250, 0);
var p4 = new createjs.Point(250, 400);
var shapes = new Array();
var anzahl = 20;
for (var i = 0; i < anzahl; i++) {
shapes[i] = new createjs.Shape();
stage.addChild(shapes[i]);
}
this.addEventListener("tick", progRotate.bind(this));
function progRotate() {
i1 += 0.09;
i2 += 0.08;
for (i = 0; i < anzahl; i++) {
p2.y = Math.cos(i1) * i * 5 + 100; //y
p2.x = Math.sin(i1) * i * 5 + 100; //x
p3.y = Math.cos(i2) * i * 10 + 200; //y
p3.x = Math.sin(i2) * i * 10 + 300; //x
p1.x = Math.sin(i1) * i*10 +250;
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke(stroke_color);
g.moveTo(p1.x, p1.y);
g.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, p1.x, p4.y);
g.endStroke();
shapes[i].graphics.clear();
shapes[i].graphics = g;
this.addChild(shapes[i]);
}
}
Eine kleine Änderung des vorigen Beispiels ermöglicht eine Änderung der Parameter durch Mausposition. Je weiter man sich horizontal von der Mitte der Bühne bewegt, desto größer wird der Abstand der Linien. Vertikal erzeugt die Mausposition einen größeren Radius der Biegungspunkte und somit eine stärkere Bewegung.
var i1 = 0.1;
var i2 = 0.24;
var p1 = new createjs.Point(0, 0);
var p2 = new createjs.Point(0, 0);
var p3 = new createjs.Point(0, 0);
var p4 = new createjs.Point(0, 600);
var shapes = new Array();
var anzahl = 30;
for (var i = 0; i < anzahl; i++) {
shapes[i] = new createjs.Shape();
stage.addChild(shapes[i]);
}
this.addEventListener("tick", progRotate.bind(this));
function progRotate() {
i1 += 0.09;
i2 += 0.08;
for (i = 0; i < anzahl; i++) {
var stroke_color = createjs.Graphics.getHSL(250, 100, 50+i,1);
p1.x = Math.sin(i1) * i * (stage.mouseX-400)/32 +400;
p2.y = Math.cos(i1) * i * stage.mouseY/20 + 200; //y
p2.x = Math.sin(i1) * i * 5 + 300//x
p3.y = Math.cos(i2) * i * 10 + 200; //y
p3.x = Math.sin(i2) * i * stage.mouseY/20 + 600; //x
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke(stroke_color);
g.moveTo(p1.x, p1.y);
g.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, p1.x, p4.y);
g.endStroke();
shapes[i].graphics.clear();
shapes[i].graphics = g;
this.addChild(shapes[i]);
}
}
Es geht darum eine oder mehrere Kurven zu animieren. Es gibt MCs mit Bewegungstweens an dem ein MC (Punkt) an einer Linie entlang läuft (Pfadtween). Dieses Bewegungstween dient als Vorlage für die animierte Linie, ähnlich als würde die Linie gerade gezeichnet oder geschrieben
In den Beispielen zum download bekommt diese Linie in ihrem Verlauf verschiedene Geschwindigkeiten. Diese Geschwindigkeiten sind ein einem Array hinterlegt. In den Dateien zum Runterladen finden sich viele Step By Step Beispiele, die immer komplexer werden und auskommentiert sind, so dass man sich langsam an die Problematik herantastet.
In den Dateien zum Download schauen Sie unter graphics/ graphicAni/setInterval/ g5
In einem anderen Beispiel kann man zwischen 2 Vorlagen hin und her schalten während die Linie sich zeichnet. Siehe Download: graphics/zweiZuEins/g10
Beispiel 1, Beispiel 2 Beispiel 3, Beispiel 4, Beispiel 5, Beispiel 6
In weiteren Schritt für Schritt Anleitungen endet eine Serie mit dem Schreiben von Worten. Hierbei werden die Linien auch unterbrochen, um für einen neuen Buchstaben oder ein Satzzeichen neu anzusetzen.
Aufträge könnt ihr mir per Email schicken oder anrufen:
Hompage: http://www.pastorpixel.de