Zeichnen von Linien und Kurven

Um mithilfe der graphics -Eigenschaft einer Shape-, Sprite- oder MovieClip-Instanz zeichnen zu können, müssen Sie zunächst den Stil (Liniengröße und -farbe, Füllfarbe) festlegen, der beim Zeichnen verwendet wird. Wie bei der Verwendung der Zeichenwerkzeuge in Adobe® Flash® Professional oder einer anderen Zeichenanwendung können Sie beim Zeichnen mit ActionScript Zeichnungen mit oder ohne Strich sowie mit oder ohne Füllfarbe erstellen. Sie können das Erscheinungsbild der Striche mit der lineStyle() -Methode oder der lineGradientStyle() -Methode angeben. Mit der lineStyle() -Methode können Sie gefüllte Linien erstellen. Beim Aufrufen dieser Methode übergeben Sie in den meisten Fällen Werte für die ersten drei Parameter: Linienstärke, Farbe und Alpha. Mit der folgenden Codezeile werden beispielsweise mit dem Shape-Objekt myShape Linien gezeichnet, die eine Linienstärke von 2 Pixel, die Farbe Rot (0x990000) und eine Opazität von 75 % aufweisen:

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

Der Standardwert für den Alphaparameter ist 1,0 (100 %), daher müssen Sie diesen Parameter nicht angeben, wenn Sie eine vollständig undurchsichtige Linie erstellen möchten. Bei der lineStyle() -Methode können Sie zwei weitere Parameter für die Anzeige von Strichen als ganze Pixel und für den Skalierungsmodus angeben. Weitere Informationen zur Verwendung dieser Parameter finden Sie in der Beschreibung der Graphics.lineStyle() -Methode im ActionScript 3.0-Referenzhandbuch für die Adobe Flash-Plattform .

Mit der lineGradientStyle() -Methode können Sie Farbverlaufslinien erstellen. Diese Methode wird unter Erstellen von Farbverlaufslinien und -füllungen beschrieben.

Wenn Sie eine gefüllte Form erstellen möchten, rufen Sie zunächst die Methode beginFill() , beginGradientFill() oder beginBitmapFill() oder beginShaderFill() auf und starten dann die Zeichnung. Die Basismethode beginFill() akzeptiert zwei Parameter: die Füllfarbe und (optional) einen Alphawert für die Füllfarbe. Wenn Sie z. B. eine Form mit einer einfarbigen grünen Füllung zeichnen möchten, verwenden Sie den folgenden Code (für ein Objekt mit dem Namen myShape ):

myShape.graphics.beginFill(0x00FF00);

Durch Aufruf einer Füllmethode wird implizit eine bisherige Füllung beendet, bevor eine neue Füllung begonnen wird. Beim Aufrufen einer Methode, mit der ein Strichstil angegeben wird, wird der vorherige Strich ersetzt, während eine zuvor angegebene Füllung nicht geändert wird, und umgekehrt.

Nach dem Angeben des Linienstils und der Fülleigenschaften geben Sie als Nächstes den Anfangspunkt der Zeichnung an. Die Graphics-Instanz verfügt über einen Zeichnungspunkt, ähnlich der Zeichenstiftspitze auf dem Papier. Der jeweils nächste Zeichenvorgang beginnt an der entsprechenden Position des Zeichnungspunkts. In der Standardeinstellung befindet sich der Zeichnungspunkt eines Graphics-Objekts an der Position (0,0) des Koordinatenraums des gezeichneten Objekts. Wenn Sie die Zeichnung an einer anderen Position beginnen möchten, rufen Sie zunächst die moveTo() -Methode und anschließend eine der Zeichnungsmethoden auf. Dies entspricht dem Bewegen der Zeichenstiftspitze an eine andere Stelle auf dem Papier.

Ausgehend vom Zeichnungspunkt erstellen Sie Zeichnungen durch mehrere Aufrufe der Zeichnungsmethoden lineTo() (Zeichnen gerader Linien) und curveTo() (Zeichnen gekrümmter Linien).

Wenn Sie eine Füllfarbe angegeben haben, können Sie beim Zeichnen die Füllung abschließen, indem Sie die endFill() -Methode aufrufen. Wenn Sie keine geschlossene Form gezeichnet haben (d. h., wenn sich der Zeichnungspunkt beim Aufrufen von endFill() nicht am Anfangspunkt der Form befindet) und dann die endFill() -Methode aufrufen, wird die Form in der Flash-Laufzeitumgebung automatisch geschlossen, indem eine gerade Linie vom aktuellen Zeichnungspunkt zu der Position gezogen wird, die beim letzten Aufruf von moveTo() angegeben wurde. Wenn Sie eine Füllung begonnen und endFill() nicht aufgerufen haben, wird durch Aufruf von beginFill() (oder einer der anderen Füllmethoden) die aktuelle Füllung beendet und eine neue Füllung begonnen.

Durch Aufrufen der lineTo() -Methode wird mit dem Graphics-Objekt eine gerade Linie vom aktuellen Zeichnungspunkt zu den Koordinaten gezogen, die Sie als beide Parameter beim Aufruf der Methode angeben, und zwar mit dem angegebenen Linienstil. In der folgenden Codezeile wird der Zeichnungspunkt beispielsweise an die Position (100, 100) verschoben. Anschließend wird eine Linie zur Position (200, 200) gezogen:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.lineTo(200, 200);

Im folgenden Beispiel werden rote und grüne Dreiecke mit einer Höhe von 100 Pixel erstellt:

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
 
this.addChild(triangle);

Mit der curveTo() -Methode wird eine quadratische Bézier-Kurve gezeichnet. Dabei wird ein Bogen erstellt, der zwei Punkte (die sogenannten Ankerpunkte) verbindet und sich gleichzeitig in Richtung eines dritten Punktes (dem sogenannten Kontrollpunkt) spannt. Im Graphics-Objekt dient die aktuelle Zeichnungsposition als erster Ankerpunkt. Beim Aufrufen der curveTo() -Methode werden vier Parameter übergeben: die x- und y-Koordinate des Kontrollpunkts, gefolgt von der x- und y-Koordinate des zweiten Ankerpunkts. Mit dem folgenden Code wird beispielsweise eine Kurve mit dem Anfangspunkt (100, 100) und dem Endpunkt (200, 200) gezeichnet. Da sich der Kontrollpunkt an Position (175, 125) befindet, wird eine Kurve erstellt, die nach rechts und dann nach unten gekrümmt ist:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.curveTo(175, 125, 200, 200);

Im folgenden Beispiel werden rote und grüne kreisförmige Objekte mit einer Breite und Höhe von 100 Pixel erstellt. Beachten Sie, dass es sich aufgrund der Merkmale der quadratischen Bézier-Gleichung nicht um perfekt geformte Kreise handelt:

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
 
this.addChild(roundObject);