Zeichenobjekte / Formen und Linien per AS3

Referenzen Adobe:
Graphics | Grundlagen Zeichnungs API |

Hier geht es um drawCircle(), drawRect(), um Display Objekte, Anzeigeobjekte, addChild(), Anzeige Objekt Container und wie man aus einer benutzerdefinierten Klasse heraus, diese grafischen Objekte auf die Bühne bringt

Siehe hierzu auch die Tipps in AS2, denn die Methoden sind sehr ähnlich.

Beachte dass in AS3 vor den Methoden lineTo() etc. noch die Methode graphics erscheinen muss.
myShape.graphics.lineTo(10,100);

Außerdem darf man nicht vergessen, das Objekt mit addChild() der Anzeigenliste hinzuzufügen.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

Flash AS3 lineTo

Zeichnen mit Actionscript 3

zurück zur Hauptseite Flash Actionscript 3

Die Zeichenmethoden in AS3 sind denen in AS2 sehr ähnlich. Ich habe hier einige Beispiele, die ich in AS2 gemacht habe, in AS3 nachgebaut.

Linie mit Actionscript zeichnen

Beispiel linie.swf

var myShape:Shape= new Shape();

this.addChild(myShape);

myShape.graphics.lineStyle(2, 0x990000, .75);

myShape.graphics.moveTo(20,100);

myShape.graphics.lineTo(250,130);

 

Wie man hier sieht unterscheidet sich der Code kaum vom AS2 Code. In AS2 waren Grafiken immer MovieClips, das ist zwar heute auch möglich, sollte aber nur dann gemacht werden, wenn der Klasse noch Methoden hinzugefügt werden sollen, die mit der Shape Klasse nicht möglich sind. Beachte dass hier die Methode graphics eingefügt werden muss. Beachte, dass die Alpha Werte in AS3 nicht in Prozent angegeben werden, sondern von 0 bis 1.

Einfache Grafik dynamisch erstellen

Beispiel form.swf

var myShape:Shape= new Shape();
this.addChild(myShape);
myShape.x=20;
myShape.y=20;
myShape.graphics.lineStyle(1, 0x000000, 1);
myShape.graphics.beginFill(0xff00ff,0.5);
myShape.graphics.lineTo(0,100);
myShape.graphics.lineTo(100,100);
myShape.graphics.lineTo(20,10);
myShape.graphics.endFill();

Siehe AS2 Beispiel auf Seite 8

 

Gerade Linien mit Mausklick zeichnen

Beispiel linienMaus.swf

var myShape:Shape= new Shape();
this.addChild(myShape);
myShape.graphics.moveTo(100,300);

function zeichneLinie(evt:MouseEvent):void {
myShape.graphics.lineStyle(2, 0x990000, .75);
myShape.graphics.lineTo(evt.stageX,evt.stageY);
}
function loescheZeichnung(evt:MouseEvent):void {
myShape.graphics.clear();
myShape.graphics.moveTo(100,300);
}
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneLinie);
loesch_btn.addEventListener(MouseEvent.CLICK, loescheZeichnung);

 

Eckige Form mit Mausklick zeichnen

Beispiel eckigeFormZeichnen.swf

var eckForm:Shape= new Shape();
this.addChild(eckForm);
eckForm.graphics.moveTo(100,300);
eckForm.graphics.lineStyle(2, 0x990000, .75);
eckForm.graphics.beginFill(0xFFF000);
function zeichneEckForm(evt:MouseEvent):void {
eckForm.graphics.lineTo(evt.stageX,evt.stageY);
}
function loeschEckForm(evt:MouseEvent):void {
eckForm.graphics.clear();
eckForm.graphics.lineStyle(2, 0x990000, .75);
eckForm.graphics.beginFill(0xFFF000);
eckForm.graphics.moveTo(100,300);
}
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneEckForm);
loesch_btn.addEventListener(MouseEvent.CLICK, loeschEckForm);

Spannband

Beispiel spannband.swf

var spannBand:Shape = new Shape();
addChild(spannBand);
function spannen(evt:MouseEvent):void{
spannBand.graphics.clear();
spannBand.graphics.lineStyle(1, 0x000000, 1);
spannBand.graphics.moveTo(0,0);
spannBand.graphics.lineTo(evt.stageX, evt.stageY);
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, spannen);

 

Dieses Beispiel gibt es in meinem AS2 Tipp auf Seite 5.
ACHTUNG ! Die Methode clear() löscht in AS3 auch die Füllmethode und den Linienstil. Deswegen wird hier nach clear() der Linienstil erneut definiert.
Hier kann man mit Flash AS3 eine Linie erzeugen, die die Richtung der Maus, auf einen bestimmten Punkt hin, anzeigt.

Linie aus einem Punkt ziehen

 

Beispiel spannband2.swf

var spannBand:Shape = new Shape();
addChild(spannBand);
function spannen(evt:MouseEvent):void {
spannBand.graphics.clear();
spannBand.graphics.moveTo(point_btn.x,point_btn.y);
spannBand.graphics.lineStyle(1, 0x000000, 1);
spannBand.graphics.lineTo(evt.stageX, evt.stageY);
}
function startSpannen(evt:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, spannen);
}
function stopSpannen(evt:MouseEvent):void {
spannBand.graphics.clear();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, spannen);
}
point_btn.addEventListener(MouseEvent.MOUSE_DOWN, startSpannen);
stage.addEventListener(MouseEvent.MOUSE_UP, stopSpannen);

 

Hier klickt man auf einen Button und zieht eine Linie aus dem Mittelpunkt des Buttons heraus. Diese Funktion kann man beispielsweise in Spielen verwenden, wo man ein bestimmtes Ziel anvisiert. Auch dieses AS3 Beispiel gibt es in der AS2 Version auf Seite 6.

 

Form mit verschiebbaren Ecken

Beispiel eckenVerschieben.swf

var form:MovieClip = new MovieClip();
addChild(form);
setChildIndex(form,0);
function zeichneDich(evt:Event):void {
evt.currentTarget.graphics.clear();
evt.currentTarget.graphics.moveTo(p1_mc.x, p1_mc.y);
evt.currentTarget.graphics.beginFill(0xffcc00,30);
evt.currentTarget.graphics.lineTo(p2_mc.x, p2_mc.y);
evt.currentTarget.graphics.lineTo(p3_mc.x, p3_mc.y);
evt.currentTarget.graphics.lineTo(p4_mc.x, p4_mc.y);
evt.currentTarget.graphics.endFill();
}

form.addEventListener(Event.ENTER_FRAME, zeichneDich);

//---------------------------Klassendatei punkt_mc ---------------------------

package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class punkt_mc extends MovieClip {
public function punkt_mc() {
this.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
this.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
}
private function startschieben(evt:MouseEvent):void {
this.startDrag();
}
private function stopschieben(evt:MouseEvent):void {
this.stopDrag();
}
}
}

Hier haben wir im ersten Teil den Code der fla, der mal wieder der AS2 Lösung sehr ähnlich ist. Auf der Bühne befinden sich 4 MC Instanzen der Klasse punkt_mc, zu denen die Klassendatei angelegt wurde. Siehe dazu meinen Tipp Klassen und MovieClip/addChild. Unten habe ich noch eine Lösung ohne Klassendatei als abschreckendes Beispiel hinzugefügt. Denn hier wird sofort deutlich dass die Definition einer Klasse, welche das Verschieben gleich integriert, wesentlich sinnvoller ist, als für jede Instanz 2 EventListener zu registrieren.

//--------------------------------TEIL 2 ---------------------------------------
//-------------------unschöne Alternative ohne Klassendatei---------------------

function startschieben(evt:MouseEvent):void {
evt.currentTarget.startDrag();
}
function stopschieben(evt:MouseEvent):void {
evt.currentTarget.stopDrag();
}
p1_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p1_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
p2_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p2_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
p3_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p3_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
p4_mc.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
p4_mc.addEventListener(MouseEvent.MOUSE_UP, stopschieben);

 

Zeichnen mit Maus 1

Beispiel zeichnen1.swf

var myShape:Shape= new Shape();
this.addChild(myShape);
myShape.graphics.moveTo(0,0);

function zeichnenStart(evt:MouseEvent):void {
myShape.graphics.clear();
myShape.graphics.lineStyle(2, 0x990000, .75);
myShape.graphics.moveTo(evt.stageX,evt.stageY);
}

function zeichnen(evt:MouseEvent):void {
myShape.graphics.lineTo(evt.stageX,evt.stageY);
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichnenStart);
stage.addEventListener(MouseEvent.MOUSE_MOVE, zeichnen);

 

In meinen AS2 Tipps befindet sich dieses Beispiel auf Seite 4. Auch an diesem Beispiel sieht man, dass der Code in AS3 dem AS2 Code sehr ähnlich ist, jedoch unterscheidet sich die Mehtode clear() insofern, dass in AS3 auch Linienstil und Füllung gelöscht werden. Deswegen wird in diesem Beispiel der Liniestil nach clear() neu defniert.

Zeichnen mit Maus 2

Beispiel zeichnen2.swf

var myLine:Shape= new Shape();
this.addChild(myLine);

function zeichneStart(evt:MouseEvent):void {
myLine.graphics.lineStyle(2, 0x990000, .75);
myLine.graphics.moveTo(evt.stageX,evt.stageY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, zeichne);
}

function zeichne(evt:MouseEvent):void {
myLine.graphics.lineTo(evt.stageX,evt.stageY);
}

function zeichneStop(evt:Event):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, zeichne);
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichneStart);
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneStop);

function loescheLinie(evt:MouseEvent):void {
myLine.graphics.clear();
}
loesch_btn.addEventListener(MouseEvent.CLICK, loescheLinie);
stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichneStart);
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneStop);

 

Hier haben wir eine eine Zeichenfunktion, wie man es gewohnt ist. Man zeichnet mit gedrückter Maustaste. Durch die EventListener ist das hier wesentlich einfacher, als in meinem AS2 Tipp.

Zeichnung speichern

Beispiel zeichnungSpeichern.swf

 

//2 Variablen für for-Schleifen
var i:int;
var e:int;
//pointsX pointsY sind die aktuellen Positionen beim Zeichnen eines Liniensegments
var pointsX:String;
var pointsY:String;
//die aktuellen Positionen wenn ein Liniensegement als Kopie erzeugt wird
var xPos:String;
var yPos:String;
//ein Array aus xPos und yPos, für die Kopie
var dataX:Array;
var dataY:Array;
//ein Array, welches alle Liniensegmente aufnimmt
var lineSeg:Array = new Array();

var myLine:Shape= new Shape();
this.addChild(myLine);

 

//diese Funktion zeichnet ein Liniensegment, die Werte kommen aus dem Array lineSeg, es wird die Indexposition von lineSeg erwartet, aus den Strings xPos und yPos wird jeweils ein Array mit Daten gefüllt, dataX, dataY, die Linie beginnt mittels moveTo, bei dataX[0], dataY[0], alle weiteren Position werden mit lineTo verbunden, die Arrays dataX und dataY werden nach jedem Durchlauf gelöscht, siehe Funktion nochmal

function drawSeg(segNr:int):void {
xPos=String(lineSeg[segNr].xPos);
yPos=String(lineSeg[segNr].yPos);
dataX =xPos.split(",");
dataY=yPos.split(",");
myLine.graphics.moveTo(dataX[0],dataY[0]);
for (i=1; i<dataX.length-1; i++) {
myLine.graphics.lineStyle(1, 0x000000, 1);
myLine.graphics.lineTo(dataX[i],dataY[i]);
}
}

//Liniensegment wird dem Array lineSeg hinzugefügt, hier ein Beispiel:
//lineSeg.push({lineDicke:2, xPos:"2,4,5,23,53,23,123,34,34,234", yPos:"45,233,3,213,13,34,34,233,42,34"});

function addSeg(xWerte:String, yWerte:String) {
lineSeg.push({lineDicke:2, xPos:xWerte, yPos:yWerte});
}

 

function nochmal(evt:MouseEvent):void {
for (e=0; e<lineSeg.length; e++) {
drawSeg(e);
}
lineSeg = new Array();
}

//-----------------------------------------------------

//die folgenden Funktionen findet man in ähnlicher Form im vorigen Beispiel,

function zeichneStart(evt:MouseEvent):void {
pointsX="";
pointsY="";
myLine.graphics.lineStyle(2, 0x990000, .75);
myLine.graphics.moveTo(evt.stageX,evt.stageY);
pointsX+=String(evt.stageX)+",";
pointsY+=String(evt.stageY)+",";
stage.addEventListener(MouseEvent.MOUSE_MOVE, zeichne);
}

function zeichne(evt:MouseEvent):void {
pointsX+=String(evt.stageX)+",";
pointsY+=String(evt.stageY)+",";
myLine.graphics.lineTo(evt.stageX,evt.stageY);
}

function zeichneStop(evt:Event):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, zeichne);
trace("Xwerte: "+pointsX+" Ende");
trace("Ywerte: "+pointsY);
addSeg(pointsX,pointsY);
}

 

function loescheLinien(evt:MouseEvent):void {
myLine.graphics.clear();
}

 

stage.addEventListener(MouseEvent.MOUSE_DOWN, zeichneStart);
stage.addEventListener(MouseEvent.MOUSE_UP, zeichneStop);
loesch_btn.addEventListener(MouseEvent.CLICK, loescheLinien);
nochmal_btn.addEventListener(MouseEvent.CLICK, nochmal);

 

Hier wurde die Zeichenfunktion noch etwas erweitert und zwar werden die einzelnen Liniensegmente in einem mehrdimensionalen Array gespeichert. Nachdem man die Zeichnung gelöscht hat, kann man sie erneut aufrufen. Die neue Zeichnung holt sich die x-yPositionen der Linen aus dem mehrdimensionalen Array. Es ist ein Leichtes das Array lineSeg um Linienstärke, Farbe und Alphawert zu erweitern. Das Ganze macht so noch nicht viel Sinn, aber in Zusammenhang mit einer Speicherfunktion, kann man sich ein schönes Programm zusammenbasteln. Wer Schwierigkeiten mit dem Array hat, sollte sich diesen Link einmal anschauen.