Lijnen en curven tekenen

Wanneer u met de eigenschap graphics van een instantie Shape, Sprite of MovieClip wilt tekenen, moet u eerst de stijl (lijngrootte en kleur, vulkleur) definiëren die bij het tekenen wordt gebruikt. Net als wanneer u de tekengereedschappen in Adobe® Flash® Professional of andere tekentoepassingen gebruikt, kunt u in ActionScript met of zonder streek en met of zonder vulkleur tekenen. U geeft het uiterlijk van de streek op met de methode lineStyle() of lineGradientStyle() . Als u een effen lijn wilt maken, gebruikt u de methode lineStyle() . Wanneer u deze methode aanroept, zijn de eerste drie parameters die u opgeeft de meest voorkomende waarden: lijndikte, -kleur en -alfa. Deze coderegel instrueert de Shape met de naam myShape lijnen te tekenen die 2 pixels dik, rood (0x990000) en 75% dekkend zijn:

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

De standaardwaarde voor de parameter alpha is 1,0 (100%), dus u kunt deze parameter uitgeschakeld laten wanneer de lijn volledig dekkend moet zijn. De methode lineStyle() accepteert ook twee bijkomende parameters voor pixelhints en de schaalmodus. Zie de beschrijving van de methode Graphics.lineStyle() in de Naslaggids voor ActionScript 3.0 voor het Adobe Flash-platform voor meer informatie over het gebruik van deze parameters.

U kunt een verlooplijn maken met de methode lineGradientStyle() . Deze methode wordt beschreven in Verlooplijnen en vullingen maken .

Wanneer u een gevulde vorm wilt maken, roept u de methode beginFill() , beginGradientFill() , beginBitmapFill() of beginShaderFill() aan voordat u begint met tekenen. De eenvoudigste methode van deze drie, de methode beginFill() , accepteert twee parameters: de vulkleur en (optioneel) een alfawaarde voor de vulkleur. Wanneer u bijvoorbeeld een vorm met een effen groene vulling wilt maken, gebruikt u de volgende code (we gaan er vanuit dat er op een object met de naam myShape wordt getekend):

myShape.graphics.beginFill(0x00FF00);

Wanneer een vulmethode wordt aangeroepen, wordt een eerdere vulling impliciet beëindigd voordat er een nieuwe wordt gestart. Wanneer u een methode aanroept die een streekstijl opgeeft, wordt de vorige streek vervangen, maar wordt geen eerder opgegeven vulling gewijzigd en vice versa.

Wanneer u de lijnstijl en vuleigenschappen hebt opgegeven, is de volgende stap het beginpunt voor uw tekening aangeven. De instantie Graphics heeft een tekenpunt, net als de punt van een pen op een vel papier. Op de plek waar het tekenpunt staat, begint de volgende tekenhandeling. Een object Graphics begint met het tekenpunt op het punt 0, 0 in de coördinaatruimte van het object waarop wordt getekend. Wanneer u op een ander punt met tekenen wilt beginnen, roept u eerst de methode moveTo() aan voordat u een van de tekenmethoden aanroept. Dit is hetzelfde als de punt van een pen van het papier halen en deze op een andere plaats weer neerzetten.

Wanneer het tekenpunt op zijn plaats staat, tekent u met behulp van een reeks aanroepen van de tekenmethoden lineTo() (voor rechte lijnen) en curveTo() (voor gekromde lijnen).

Als u een vulkleur hebt opgegeven terwijl u tekent, kunt u de vulling uitschakelen door de methode endFill() aan te roepen. Als u geen gesloten vorm hebt getekend (met andere woorden als het tekenpunt niet samenvalt met het beginpunt van de vorm op het moment dat u de methode endFill() aanroept) en u de methode endFill() aanroept, wordt de vorm automatisch gesloten door Flash-runtime door een rechte lijn te tekenen van het huidige tekenpunt naar de locatie die is opgegeven in de meest recente aanroep van moveTo() . Als u met een vulling bent begonnen en geen aanroep van endFill() hebt uitgevoerd, wordt de huidige vulling gesloten wanneer u beginFill() (of een van de andere vulmethoden) aanroept en wordt een nieuwe vulling gestart.

Wanneer u de methode lineTo() aanroept, tekent het object Graphics een rechte lijn vanaf het huidige tekenpunt naar de coördinaten die u opgeeft als de twee parameters in de methodeaanroep, waarbij de lijnstijl wordt getekend die u hebt opgegeven. De volgende coderegel zet bijvoorbeeld het tekenpunt op het punt 100, 100 en tekent vervolgens een lijn naar het punt 200, 200:

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

In het volgende voorbeeld worden rode en groene driehoeken met een hoogte van 100 pixels getekend:

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

De methode curveTo() tekent een kwadratische Bézier-curve. Er wordt een boog getekend die op twee punten (ankerpunten) samenkomt en naar een derde punt (het besturingspunt) toebuigt. Het object Graphics gebruikt de huidige tekenpositie als het eerste ankerpunt. Wanneer u de methode curveTo() aanroept, geeft u vier parameters door: de x- en y-coördinaten van het besturingspunt, gevolgd door de x- en y-coördinaten van het tweede ankerpunt. De volgende code tekent bijvoorbeeld een curve die begint bij punt 100, 100 en eindigt bij punt 200, 200. Omdat het besturingspunt zich op punt 175, 125 bevindt, wordt een curve gemaakt die eerst naar rechts en vervolgens omlaag loopt:

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

In het volgende voorbeeld worden rood met groene ronde objecten met een breedte en hoogte van 100 pixels getekend. De cirkels zijn echter niet perfect door de aard van de kwadratische Bézier-vergelijking:

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