Graphic, Schreibschrift

Hier geht es darum , dass die Funktion per Buttonklick gestartet wird.

In den Download Beispielen / graphic / graphicAni/ setInterval werden verschiedene Kurven auf Buttonklick erzeugt und das Script wird optimiert.

Im weiteren Verlauf kommt eine gesteuerte Geschwindigkeit hinzu.

//eine neue Instanz von Hallo wird erzeugt
//darin befindet sich der Movieclip mov_mc
//er ist animiert und läuft an der Linie entlang

var linie = new lib.Hallo();
this.addChild(linie);
linie.stop();


var g = new createjs.Graphics();
g.setStrokeStyle(3);
g.beginStroke("#000");
g.moveTo(linie.mov_mc.x, linie.mov_mc.y);
g.lineTo(linie.mov_mc.x, linie.mov_mc.y);
g.beginStroke("rgba(1, 1, 255, 1)");

var shape = new createjs.Shape(g);
shape.x = 100;
shape.y = 200;
this.addChild(shape);

this.start_btn.addEventListener("click", startCurve.bind(this));

function drawing() {

	if (linie.currentFrame == 0) {
		shape.graphics.clear();
		//Wiederholung von Zeile 11 bis 15
		g.setStrokeStyle(3);
		g.beginStroke("rgba(30,0,190,1)");
		g.moveTo(linie.mov_mc.x, linie.mov_mc.y);
		g.lineTo(linie.mov_mc.x, linie.mov_mc.y);
		g.beginStroke("rgba(1, 1, 255, 1)");

	} else {
		g.lineTo(linie.mov_mc.x, linie.mov_mc.y);
		this.addChild(shape);
	}

}



function startCurve() {
	linie.play();
	this.addEventListener("tick", drawing.bind(this));
}