繪製線段和曲線

若要使用 Shape、Sprite 或 MovieClip 實體的 graphics 屬性來繪圖，首先必須先定義繪圖時要使用的樣式 (線段大小與顏色、填色顏色)。就像您使用 Adobe® Flash® Professional 或其它繪圖應用程式中的繪圖工具一樣，當您使用 ActionScript 繪圖時，您可以選擇要不要加上筆畫以及填色顏色。您可以使用 lineStyle() 或 lineGradientStyle() 方法來指定筆畫外觀。若要建立實線，請使用 lineStyle() 方法。呼叫此方法時，最常指定的值是前三個參數：線段粗細、顏色和 Alpha。例如，這行程式碼會告訴名為 myShape 的 Shape 來繪製粗細為 2 個像素、紅色 (0x990000)，以及 75% 不透明度的線段：

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

Alpha 參數的預設值為 1.0 (100%)，因此假如您需要完全不透明的線段，可以捨棄使用此參數。lineStyle() 方法還可接受其他兩個用於像素提示與縮放模式的參數；如需有關使用這些參數的詳細資訊，請參閱適用於 Adobe Flash Platform 的 ActionScript 3.0 參考中 Graphics.lineStyle() 方法的說明。

若要建立漸層線段，請使用 lineGradientStyle() 方法。建立漸層線段與填色中將詳細介紹這個方法。

如果您想要建立填色形狀，可以在開始繪圖之前，先呼叫 beginFill()、beginGradientFill()、beginBitmapFill() 或 beginShaderFill() 方法。其中最基本的方法是 beginFill()，它接受兩個參數：填色顏色和 (選擇性) 填色顏色的 Alpha 值。例如，如果您想要用一個純綠色填色的形狀來繪圖，就要使用下列程式碼 (假定您正在繪製名為 myShape 的物件)：

myShape.graphics.beginFill(0x00FF00);

在開始新的填色工作之前，呼叫任何填色方法會暗中結束先前的任何填色工作。呼叫任何可指定筆畫樣式的方法會取代上一個筆畫，但是不會改變先前指定的填色，反之亦然。

一旦您指定了線段樣式與填色屬性，下一步就是指出繪圖的開始點。Graphics 實體具有一個繪圖點，就像紙張上的鋼筆筆尖。不管繪圖點的位置在哪，那個位置就是下一個繪圖動作開始的地方。一開始，Graphics 物件會將繪圖點放在物件座標空間的 0,0 繪圖位置上。若要在不同點開始繪圖，則必須先呼叫 moveTo() 方法，再呼叫其中一個繪圖方法。這種方式就好比將鋼筆筆尖從紙張上提起，然後放到新的位置一樣。

隨著繪圖點就定位，您就可以連續呼叫 lineTo() (用於繪製直線) 與 curveTo() (用於繪製曲線) 等繪圖方法來開始繪圖。

在繪圖過程中，您可以隨時呼叫 moveTo() 方法，停止繪圖，並將繪圖點移至新的位置。

在繪圖過程中，如果已經指定填色顏色，則可以呼叫 endFill() 方法來封閉填色。如果您尚未繪製封閉形狀 (也就是說，如果當您呼叫 endFill() 時，繪圖點不是位於形狀的開始點)，則當您呼叫 endFill() 方法時，Flash 執行階段會從目前的繪圖點繪製一條直線到最近一次 moveTo() 呼叫所指定的位置，自動將形狀封閉起來。如果您已經開始填色，但尚未呼叫 endFill()，則呼叫 beginFill() (或其它任何一種填色方法) 會封閉目前的填色工作，並開始新的填色工作。

當您呼叫 lineTo() 方法，Graphics 物件會從目前的繪圖點繪製一條直線到您在方法呼叫中指定做為兩個參數的座標為止，並使用您所指定的線段樣式來繪製直線。例如，這一行程式碼會將繪圖點放在 100, 100 的點座標，然後繪製一條到達 200, 200 點座標的直線：

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

下列範例將以 100 像素的高度繪製紅色和綠色的三角形：

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

curveTo() 方法可繪製一個二次方貝茲曲線。這個方法所繪製的弧形不只能夠連接兩個點 (稱為錨點)，還能同時折彎線段以連接第三個點 (稱為控制點)。Graphics 物件會使用目前的繪圖位置做為第一個錨點。呼叫 curveTo() 方法時，您可以傳遞四個參數：控制點的 x 和 y 座標，後面接著第二個錨點的 x 和 y 座標。例如，下列程式碼會於 100, 100 點座標開始繪製曲線，然後在 200, 200 點座標結束繪圖。由於控制點位於 175, 125 的點座標位置，如此一來便產生了先移到右邊，再向下移動的曲線：

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

下列範例將以 100 像素的寬度與高度繪製紅色和綠色的圓形物件：請注意，由於二次方貝茲曲線方程式的限制使然，因此無法繪製出完美的圓形：

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