All ritning som görs med en Graphics-instans baseras på grundläggande ritning med linjer och kurvor. Därför måste all ActionScript-ritning göras i samma steg:
-
Definiera linje- och fyllningsformat.
-
Ställ in ursprungligt ritläge.
-
Rita linjer, kurvor och former (eventuellt flytta ritpunkten).
-
Avsluta med att skapa en fyllning om det behövs.
Definiera linje- och fyllningsformat
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.
Rita raka linjer
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);
Rita kurvor
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);
|
|
|