Create JS Graphics

HTML5 - canvas - Javascript - TweenJS

AnimateCC, Canvas TweemJS Tipp TweenJS Api EaselJS Adobe Help

Graphics Api

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.

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

Füllung und Rand

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);

Styles nachträglich ändern

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%)";
}  

Verlaufsfüllung

mittels gradientFill kann man einen Verlauf bestimmen, Farben, Position der Farben, Richtung des Verlauf. Sie dazu das Beispiel linearGradientFill

Siehe Beispiel

Verlaufsfüllung mit Maus aufziehen

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.

Siehe Beispiel

Quadratic Curve

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

Beispiel

  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);

Bezier Linie

Hier wird eine geschwungene Linie gezeichnet, die 2 Biegungen hat. Die Punkte werden durch die Positionen der Movieclips definiert. p1, p2, p3, p4

Beispiel

  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);
  

Bezier Linie Punkte verschieben

Verschiebe die Punkte im folgendem Beispiel. Siehe auch den Tipp Drag & Drop

Beispiel

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);
}

  

Fließende Linie

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;

Beispiel

  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);
}
  

Mehrere Linien

Hier werden mehrere Linien in einer for Schleife erzeugt. Die Positionen werden mittels der Zählvariablen etwas versetzt.

Beispiel

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]);
}
  

Floating Lines

In diesem Beispiel werden die beiden vorigen Beispiele kombiniert.

Beispiel

  
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]);
	}

}
  

Mehrere fließende Linien mit Mauskontrolle

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.

Beispiel

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]);
	}

}
  

Kurven Animation/ Schreibeffekt

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.

Beispiel mehrere Worte

 

 

 

Aufträge könnt ihr mir per Email schicken oder anrufen:


 

Hompage: http://www.pastorpixel.de