Zeichenobjekte / Graphics / drawRect / drawCircle / lineTo

• Shape.graphics
• Gradientfill Verlaufsfüllung
• lineTo einfache Linien
• curveTo Bezier Kurven
• Bezier Segment kubische/ quadratische Bezier Kurven
• Praxis gerade Linien zeichnen, Formen zeichnen
• Form mit verschiebbaren Ecken
• Praxis mit Maus zeichnen
• Praxis Zeichnung speichen
• Grundformen mit eigenen Klassen
• Spirograph
  
  

Jedes Shape-, Sprite- und MovieClip-Objekt enthält eine graphics-Eigenschaft, bei der es sich um eine Instanz der Graphics-Klasse handelt. Die Graphics-Klasse enthält Eigenschaften und Methoden zum Zeichnen von Linien, Füllungen und Formen. Wenn Sie ein Anzeigeobjekt lediglich als Leinwand zum Zeichnen von Inhalten verwenden möchten, können Sie dazu eine Shape-Instanz einsetzen. Eine Shape-Instanz eignet sich besser als andere Anzeigeobjekte zum Zeichnen, da sie nicht über die zusätzlichen Funktionen der Sprite-Klasse oder der MovieClip-Klasse verfügt.

var cont:Shape = new Shape();
cont.graphics.beginFill(0x5500ff);
cont.graphics.drawCircle(100,100, 100);
addChild(cont);

Referenzen Adobe:
Graphics | Grundlagen Zeichnungs API | Draw Rect Adobe

Hier geht es um drawCircle(), drawRect() und weitere Zeichenmethoden.

Siehe hierzu auch die Tipps in AS2, denn die Methoden unterscheiden sich kaum von AS3.

Beachte dass die Methoden lineTo(), drawRect(), drawCircle() etc. Methoden der Graphics Klasse sind und daher die Schreibweise so aussieht:
this.graphics.lineTo(10,100);

this.graphics.lineStyle(2, 0x000000, 0.5);//Stärke, Farbe/ Alpha
this.graphics.beginFill(0x5500ff);
this.graphics.drawRect(100,100, 100, 100);//xpos, ypos, Breite , Höhe

this.graphics.beginFill(0x5500ff);
this.graphics.drawCircle(100,100, 100);//xpos, ypos, Radius

this.graphics.beginFill(0x5500ff);
this.graphics.drawEllipse(100,100, 100,50);//xpos, ypos, Breite, Höhe

Gradient Fill

Verlaufsfüllungen erzeugt man mit gradientFill Siehe auch die Refrenzen bei Adobe und das Matrix Tutorial bei senocular

Die Methode matr.rotate(); erwartet einen Winkel im Bogenmaß.
Der Kreisumfang des Einheitskreises ist:
U=2*Math.PI

Mit folgender Formel rechnet man Bogenmaß in Grad um:
grad=(bogenmaß / Math.PI) * 180
Hiermit rechnet man Grad in Bogenmaß um:
bogenmass = (grad/180) * Math.PI

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

Beziere Kurve curveTo()

siehe auch hierzu die Adobe Referenzen

In flash gibt es die sogenannten quadratischen Bezierkurven. curveTo() erwartet 4 Parameter, welche die xy-Wert von 2 Punkten sind. Der erste Punkt ist ein Kontrollpunkt, zu dem sich die Kurve hinbiegt. In dem zweiten Punkt endet das curveTo-Liniensegement. Berühre die Punkte der Grafik oder die Punkte in der Formel im folgenden Beispiel.

Beispiel 1

var curveLine:Shape = new Shape();

function drawLine(){
curveLine.graphics.clear();
curveLine.graphics.lineStyle(1, 0x000000, 1);
curveLine.graphics.moveTo(400, 0);
curveLine.graphics.curveTo(p1_mc.x,p1_mc.y, 400, 100);
curveLine.graphics.curveTo( p2_mc.x,p2_mc.y, 400, 200);
this.addChild(curveLine);
}

p1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p1_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);
p2_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);

function dragMe(evt:MouseEvent):void{
	evt.currentTarget.startDrag();
	this.addEventListener(Event.ENTER_FRAME, drawNew);
	}

function dragStop(evt:MouseEvent):void{
	evt.currentTarget.stopDrag();
	this.removeEventListener(Event.ENTER_FRAME, drawNew);
	}
	
function drawNew(evt:Event){
	drawLine();
}
drawLine();

Beispiel 2

Siehe auch das effektvolle Beispiel Curtain

 
 var curveLine:Shape = new Shape();
 
function drawLine(){
var P1:Point = new Point(p1_mc.x, p1_mc.y);
var P2:Point = new Point(p2_mc.x, p2_mc.y);
var P3:Point=Point.interpolate(P1, P2 ,0.5);
curveLine.graphics.clear();
curveLine.graphics.lineStyle(1, 0x000000, 1);
curveLine.graphics.moveTo(400, 0);
curveLine.graphics.curveTo(p1_mc.x,p1_mc.y, P3.x, P3.y);
curveLine.graphics.curveTo( p2_mc.x,p2_mc.y, 400, 200);
this.addChild(curveLine);
}

p1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p2_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
p1_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);
p2_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);


function dragMe(evt:MouseEvent):void{
	evt.currentTarget.startDrag();
	this.addEventListener(Event.ENTER_FRAME, drawNew);
	}

function dragStop(evt:MouseEvent):void{
	evt.currentTarget.stopDrag();
	this.removeEventListener(Event.ENTER_FRAME, drawNew);
	}

function drawNew(evt:Event){
    drawLine();
}

drawLine();

BezierSegment oder kubische Bezierkurve mit Flash

In den Referenzen von Adobe erfährt man, dass Flash mit der quadratischen Bezierkurve arbeitet. Will man jedoch mit der kubischen Bezierkurve arbeiten, kann man auf die Klasse BezierSegment zurückgreifen. Mit dieser Klasse kann man sich Punkte auf einer kubischen Bezierkurve ausgeben lassen. Auf folgender Seite von eleqtriq wird beschrieben wie man sich anhand dieser Punkte eine Linie erzeugen kann. http://www.eleqtriq.com/2010/04/cubic-bezier-in-flash/ Das Verfahren ist nicht ganz einfach, aber mathematisch sehr interessant und man bekommt ausgezeichnete Ergebnisse.

Michael Morawitz von Bitmagie brachte mich auf eine pragmatischere Lösung, indem man sehr viele Zwischenpunkte erzeugt und diese jeweils mit einer geraden Linie verbindet. Das Ergebnis ist zwar mathematisch nicht so genau, aber das Auge sieht den Unterschied nicht.

t ist ein Wert zwischen 0 und 1 der einen Abstand auf der Kurve definiert. Da es sich hierbei um einen "Zeitwert" oder "Geschwindigkeit" handelt, bekommt man bei gleichmäßiger Aufteilung der 1 nicht unbedingt auch gleiche Längenabstände auf der Kurve. Siehe elegriq

Nachdem man eine BezierSegment Instanz erzeugt hat, kann man eine "gebogene" Linie erzeugen, indem die 100 Segmente mit geraden Linien verbunden werden:

moveTo (a.x,a.y);
for (var i:uint=0; i < 100; i++)
{
vCurvePoint[i] = bs.getValue(i / 100);
lineStyle (0.1,0xff0000);
lineTo (vCurvePoint[i].x, vCurvePoint[i].y);
}

import fl.motion.BezierSegment;
import flash.geom.Point;
import flash.events.MouseEvent;
//-----------------------------------------------------------
var bs:BezierSegment;

const a:uint = 0;
const b:uint = 1;
const c:uint = 2;
const d:uint = 3;

var size:uint = 4;
var vBezierSegmentPoint:Vector.< Point >  = new Vector.< Point > (size);

vBezierSegmentPoint[a] = new Point(stage.stageWidth / 2 - 50,stage.stageHeight / 2 + 50);
vBezierSegmentPoint[b] = new Point(stage.stageWidth / 2 - 100,stage.stageHeight / 2 - 50);
vBezierSegmentPoint[c] = new Point(stage.stageWidth / 2 + 100,stage.stageHeight / 2 - 50);
vBezierSegmentPoint[d] = new Point(stage.stageWidth / 2 + 50,stage.stageHeight / 2 + 50);

//-----------------------------------------------------------
var anfasser:Vector.< MovieClip >  = new Vector.< MovieClip > (size);

for (var f:uint; f < size; f++)
{
	var anfs:MovieClip= new MovieClip();
	anfasser[f]= new MovieClip();
	with (anfasser[f].graphics)
	{
		beginFill (0x996600);
		drawCircle (0,0,5);
		endFill ();
	}
	anfasser[f].x = vBezierSegmentPoint[f].x;
	anfasser[f].y = vBezierSegmentPoint[f].y;
	addChild (anfasser[f]);
	anfasser[f].addEventListener (MouseEvent.MOUSE_DOWN, mausDown);
}


//-----------------------------------------------------------;

var countCurvePoints:uint = 100;
var vCurvePoint:Vector.< Point >  = new Vector.< Point > (countCurvePoints);

zeichneKurve (vBezierSegmentPoint[a],vBezierSegmentPoint[b],vBezierSegmentPoint[c],vBezierSegmentPoint[d]);

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

function zeichneKurve (a:Point,b:Point,c:Point,d:Point):void
{
	bs = new BezierSegment(a,b,c,d);
	//var n:uint = 100;//Point.distance(bs.a,bs.d);
	with (graphics)
	{
		clear ();
		//gerade Linien zwischen den Anfassern
		lineStyle (0.1,0xdddddd);
		moveTo (a.x,a.y);
		lineTo (b.x, b.y);
		moveTo (d.x,d.y);
		lineTo (c.x, c.y);
		//zeichnen der Kurve mit vielen gerade Linien
		moveTo (a.x,a.y);
		for (var i:uint=0; i < countCurvePoints; i++)
		{
			vCurvePoint[i] = bs.getValue(i / countCurvePoints);
			lineStyle (0.1,0xff0000);
			lineTo (vCurvePoint[i].x, vCurvePoint[i].y);
		}
	}

}

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

function newPos (evt:Event):void
{
	for (var i:uint; i < size; i++)
	{
		vBezierSegmentPoint[i].x = anfasser[i].x;
		vBezierSegmentPoint[i].y = anfasser[i].y;
	}

	zeichneKurve (vBezierSegmentPoint[a],vBezierSegmentPoint[b],vBezierSegmentPoint[c],vBezierSegmentPoint[d]);
}

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

function mausReleased (evt:MouseEvent):void
{
	stopDrag ();
	stage.removeEventListener (Event.ENTER_FRAME, newPos);
}

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

function mausDown (evt:MouseEvent):void
{
	//anfasser nach vorn auf die Bühne bringen
	evt.currentTarget.parent.addChild (evt.currentTarget);
	
	evt.currentTarget.startDrag ();
	stage.addEventListener (MouseEvent.MOUSE_UP, mausReleased);
	stage.addEventListener (Event.ENTER_FRAME, newPos);

}

Beachte auch, dass ich hier die Klasse Vector anstatt eines Arrays benutze, siehe dazu meinen Tipp Array AS2

curveTo()

Im folgenden Beispiel werden 4 Buttons benötigt

left_btn
down_btn
right_btn
top_btn.

var pSize:int=100;


var curvedObject:Shape = new Shape();
curvedObject.x=125;
curvedObject.y=25;
curvedObject.graphics.beginFill(0x00FF00);
this.addChild(curvedObject);


function curveRight(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.lineTo(pSize, 0);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*0.5, pSize, pSize*0.5);
	curvedObject.graphics.curveTo(pSize*1.5, pSize*0.5, pSize, pSize);
	curvedObject.graphics.lineTo(0, pSize);
	curvedObject.graphics.lineTo(0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);

}



function curveDown(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.lineTo(pSize, 0);
	curvedObject.graphics.lineTo(pSize, pSize);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*0.5, pSize*0.5, pSize);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*1.5, 0, pSize);
	curvedObject.graphics.lineTo(0, pSize);
	curvedObject.graphics.lineTo(0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);
}


function curveLeft(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.lineTo(pSize, 0);
	curvedObject.graphics.lineTo(pSize, pSize);
	curvedObject.graphics.lineTo(0, pSize);	
	curvedObject.graphics.curveTo(pSize*0.5, pSize*0.5, 0, pSize*0.5);
	curvedObject.graphics.curveTo(pSize*-0.5, pSize*0.5, 0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);

}


function curveTop(evt:MouseEvent):void
{
	curvedObject.graphics.clear();
	curvedObject.graphics.beginFill(0x00FF00);
	curvedObject.graphics.moveTo(0, 0);
	curvedObject.graphics.curveTo(pSize*0.5, pSize*-0.5, pSize*0.5, pSize*0);
	curvedObject.graphics.curveTo(pSize*.5, pSize*0.5 ,pSize, pSize*0);	
	curvedObject.graphics.lineTo(pSize, pSize);
	curvedObject.graphics.lineTo(0, pSize);	
	curvedObject.graphics.lineTo(0, 0);
	curvedObject.graphics.endFill();
	this.addChild(curvedObject);

}

left_btn.addEventListener(MouseEvent.CLICK, curveLeft);
down_btn.addEventListener(MouseEvent.CLICK, curveDown);
right_btn.addEventListener(MouseEvent.CLICK, curveRight);
top_btn.addEventListener(MouseEvent.CLICK, curveTop);

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

nächste Seite