Rita linjer och kurvor

För att kunna rita med egenskapen graphics i en Shape-, Sprite- eller MovieClip-instans måste du först definiera formatet (linjens storlek och färg samt fyllningens färg) som ska användas. Precis som när du använder ritverktygen i Adobe® Flash® Professional eller något annat ritprogram kan du rita med eller utan ramlinje och med eller utan fyllningsfärg när du ritar med ActionScript. Du anger ramlinjens storlek med metoden lineStyle() eller lineGradientStyle(). Om du vill skapa en heldragen linje använder du metoden lineStyle(). När du anropar den här metoden är de värden du oftast anger de tre första parametrarna: linjens tjocklek, färg och alfa. Den här kodraden gör till exempel att formen myShape ritar linjer två pixlar tjocka, röda (0x990000) och 75 % ogenomskinliga:

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

Standardvärdet för parametern alpha är 1.0 (100 %), så du kan utelämna parametern om du vill ha en helt ogenomskinlig linje. Metoden lineStyle() tar även två ytterligare parametrar för pixelutjämning och skalningsläge. Mer information om hur du använder dessa parametrar finns i beskrivningen av metoden Graphics.lineStyle() i Referenshandbok för ActionScript 3.0 i Adobe Flash-plattformen.

Om du vill skapa en övertoningslinje använder du metoden lineGradientStyle(). Den här metoden beskrivs i Skapa övertoningslinjer och fyllningar.

Om du vill skapa en fylld form anropar du metoden beginFill(), beginGradientFill(), beginBitmapFill() eller beginShaderFill() innan du startar ritningen. Den mest grundläggande av dessa är metoden beginFill(). Den tar två parametrar: fyllningsfärgen och (eventuellt) ett alfavärde för fyllningsfärgen. Om du till exempel vill rita en form med heltäckande grön fyllning använder du följande kod (förutsatt att du ritar på ett objekt som heter myShape):

myShape.graphics.beginFill(0x00FF00);

När en fyllningsmetod anropas avslutas automatiskt en eventuell tidigare fyllning innan den nya startas. Om en metod med som anger ett linjeformat anropas ersätts den tidigare linjen, men den tidigare angivna fyllningen ändras inte, och vice versa.

När du har angett linjeformat och fyllningsegenskaper är nästa steg att ange startpunkt för teckningen. Graphics-instansen har en ritpunkt, som spetsen på en penna på ett papper. Oavsett var ritpunkten finns är det där nästa ritåtgärd börjar. Från början har Graphics-objektet ritpunkten vid punkten 0, 0 i koordinatsystemet för det objekt som det ritar på. Om du vill börja rita på ett annat ställe anropar du metoden moveTo() innan du anropar någon av ritmetoderna. Detta motsvarar att lyfta pennan från papperet och flytta den till en ny position.

När ritpunkten är på plats ritar du med hjälp av en serie anrop till ritmetoderna lineTo() (räta linjer) och curveTo() (kurvade linjer).

När du ritar kan du anropa metoden moveTo() när som helst om du vill flytta ritpunkten till en ny position utan att rita.

När du ritar kan du stänga fyllningen genom att anropa metoden endFill() om du har angett en fyllningsfärg. Om du inte har ritat en sluten form (d.v.s. om ritpunkten inte är vid formens startpunkt när du anropar endFill()) stänger Flash-körningen automatiskt formen när du anropar endFill() genom att rita en rät linje från den aktuella ritpunkten till den plats som angavs i det senaste moveTo()-anropet. Om du har startat en fyllning men inte har anropat endFill() stänger beginFill() (eller någon av de andra fyllningsmetoderna) den aktiva fyllningen och startar en ny.

När du anropar metoden lineTo() ritar Graphics-objektet en rak linje från den nuvarande ritpunkten till de koordinater du anger som de två parametrarna i metodanropet med det linjeformat du har angett. Den här kodraden placerar till exempel ritpunkten vid punkten 100, 100 och ritar en linje till punkten 200, 200:

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

I följande exempel ritas en röd och grön trianglar som är 100 pixlar hög:

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

Metoden curveTo() är en kvadratisk bezierkurva. Den ritar en båge som ansluter två punkter (kallas ankarpunkter) och böjer sig mot en tredje punkt (kallas kontrollpunkten). I Graphics-objektet används den nuvarande ritpositionen som första ankarpunkt. När du anropar metoden curveTo() anger du fyra parametrar: kontrollpunktens x- och y-koordinater följt av den andra ankarpunktens x- och y- koordinater. Följande kod ritar till exempel en kurva från punkten 100, 100 till 200, 200. Eftersom kontrollpunkten är 175, 125 skapas en kurva som rör sig till höger och sedan nedåt.

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

I följande exempel ritas röda och gröna cirkulära objekt med bredden och höjden 100 pixlar. Observera att den kvadratiska bezierekvationen gör att dessa inte är perfekta cirklar:

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