Rysowanie linii i krzywych

Aby możliwe było rysowanie za pomocą właściwości graphics wystąpienia klasy Shape, Sprite lub MovieClip, należy najpierw zdefiniować styl (rozmiar i kolor linii oraz kolor wypełnienia), jaki będzie obowiązywał przy rysowaniu. Podobnie jak rysowanie za pomocą narzędzi w programie Adobe® Flash® Professional lub innych aplikacjach graficznych, rysowanie z poziomu kodu ActionScript może odbywać się z obrysem lub bez obrysu i z wypełnieniem bądź bez wypełnienia. Do określania wyglądu obrysu służą metody lineStyle() i lineGradientStyle() . Aby utworzyć pełną linię, należy użyć metody lineStyle() . W wywołaniu tej metody najczęściej określa się pierwsze trzy parametry: grubość, kolor i przezroczystość (alfa) linii. Poniższy przykład wiersz kodu powoduje, że w kształt myShape będzie rysowany liniami o grubości 2 pikseli, w kolorze czerwonym (0x990000), z kryciem 75%.

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

Domyślna wartość parametru alpha wynosi 1,0 (100%), a zatem jeśli linia ma być w pełni kryjąca, można pominąć ten parametr. Metoda lineStyle() przyjmuje również dwa dodatkowe parametry dotyczące przyciągania pikseli i trybu skalowania; więcej informacji o korzystaniu z tych parametrów zawiera opis metody Graphics.lineStyle() w Skorowidzu języka ActionScript 3.0 dla platformy Adobe Flash .

Aby utworzyć linię z gradientem, należy skorzystać z metody lineGradientStyle() . Ta metoda została opisana w sekcji Tworzenie linii i wypełnień gradientowych .

Jeśli chcemy utworzyć wypełniony kształt, wywołujemy metodę beginFill() , beginGradientFill() , beginBitmapFill() lub beginShaderFill() przed rozpoczęciem rysowania. Najprostsza z tych metod, beginFill() , ma dwa parametry: kolor wypełnienia oraz (opcjonalnie) wartość alfa dla koloru wypełnienia. Na przykład, jeśli chcemy narysować kształt z jednolitym zielonym wypełnieniem, należałoby mżyć następującego kodu (przy założeniu, że rysujemy w obiekcie o nazwie myShape ):

myShape.graphics.beginFill(0x00FF00);

Wywołanie każdej metody dotyczącej wypełnienia powoduje niejawne zakończenie obowiązywania poprzedniego wypełnienia. Wywołanie każdej metody określającej obrys powoduje zastąpienie poprzedniego obrysu, ale nie wpływa na zdefiniowane wcześniej wypełnienie — i na odwrót.

Po określeniu stylu linii i właściwości wypełnienia następnym krokiem będzie wskazanie punktu początkowego rysunku. Instancja klasy Graphics ma przypisany punkt rysowania, będący odpowiednikiem ostrza ołówka na papierze. Każda operacja rysowania rozpoczyna się od bieżącego punktu rysowania. Początkowo punkt rysowania obiektu Graphics znajduje się we współrzędnych 0, 0 przestrzeni współrzędnych obiektu, w którym odbywa się rysowanie. Aby rozpocząć rysowanie w innym punkcie, można wywołać metodę moveTo() przed wywołaniem wybranej metody rysującej. Operacja ta jest odpowiednikiem oderwania ołówka od papieru i przeniesienia go w nowe miejsce.

Po umieszczeniu punktu rysowania można przystąpić do wywoływania metod rysujących lineTo() (do rysowania linii prostych) i curveTo() (do rysowania krzywych).

Jeśli podczas rysowania określony został kolor wypełnienia, można domknąć wypełnienie za pomocą metody endFill() . Jeśli nie narysowano kształtu zamkniętego (innymi słowy, jeśli w momencie wywołania metody endFill() punkt rysowania nie znajduje się w punkcie początkowym kształtu), to po wywołaniu metody endFill() środowisko wykonawcze Flash automatycznie domyka kształt, rysując odcinek prosty od bieżącego punktu rysowania do miejsca określonego w ostatnim wywołaniu metody moveTo() . Jeśli rozpoczęto wypełnienie i nie wywołano metody endFill() , to wywołanie metody beginFill() (lub jednej z innych metod dotyczących wypełnienia) powoduje zamknięcie bieżącego wypełnienia i rozpoczęcie nowego.

Po wywołaniu metody lineTo() obiekt Graphics rysuje linię prostą od bieżącego punktu rysowania do współrzędnych określonych jako dwa parametry w wywołaniu metody. Rysowanie odbywa się przy zastosowaniu określonego wcześniej stylu linii. Na przykład poniższy wiersz kodu umieszcza punkt rysowania we współrzędnych 100, 100, po czym rysuje linię do punktu 200, 200:

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

Poniższy przykładowy kod rysuje czerwony i zielony trójkąt o wysokości 100 pikseli:

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

Metoda curveTo() rysuje krzywą Béziera drugiego stopnia. Jest to łuk łączący dwa punkty (nazywane punktami zakotwiczenia) i wygięty w kierunku trzeciego punktu (nazywanego punktem sterującym). Pierwszym punktem zakotwiczenia jest bieżąca pozycja rysowania. W wywołaniu metody curveTo() należy przekazać cztery parametry: współrzędne x i y punktu sterującego oraz współrzędne x i y drugiego punktu zakotwiczenia. Na przykład poniższy kod rysuje krzywą rozpoczynającą się w punkcie 100, 100 i kończącą się w punkcie 200, 200. Ponieważ punkt sterujący ma współrzędne 175, 125, powstaje krzywa biegnąca w prawo, a potem w dół:

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

Poniższy przykładowy kod rysuje czerwony i zielony okrągły obiekt o szerokości i wysokości 100 pikseli: Należy zwrócić uwagę, że z uwagi na cechy równania Béziera drugiego stopnia nie są to idealne okręgi.

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