使用圖形資料類別

Flash Player 10 以及更新的版本,Adobe AIR 1.5 以及更新的版本

增強的繪圖 API 在 flash.display 套件中新增了一組類別,其類型為 IGraphicsData (每個類別實作的介面)。實作 IGraphicsData 介面之類別的作用,就是做為繪圖 API 之方法的資料容器。

使用上述類別,即可將完整的繪圖儲存在 IGraphicsData 類型的向量物件陣列 (Vector.<IGraphicsData>) 中,這個陣列可以做為其它形狀實體的資料來源重複使用,或者可以儲存繪圖資訊供稍後使用。

請注意,每個填色樣式都有多個填色類別可供使用,但是您只能使用一個筆畫類別。ActionScript 只有一個筆畫 IGraphicsData 類別,因為這個筆畫類別可以使用多個填色類別定義其樣式。所以,每個筆畫實際上就是這個筆畫類別和某一填色類別。另外,這些圖形資料類別的 API 會反映其在 flash.display.Graphics 類別中的表示方法:

圖形方法

資料類別

beginBitmapFill()

GraphicsBitmapFill

beginFill()

GraphicsSolidFill

beginGradientFill()

GraphicsGradientFill

beginShaderFill()

GraphicsShaderFill

lineBitmapStyle()

GraphicsStroke + GraphicsBitmapFill

lineGradientStyle()

GraphicsStroke + GraphicsGradientFill

lineShaderStyle()

GraphicsStroke + GraphicsShaderFill

lineStyle()

GraphicsStroke + GraphicsSolidFill

moveTo()

lineTo()

curveTo()

drawPath()

GraphicsPath

drawTriangles()

GraphicsTrianglePath

此外,GraphicsPath 類別有自己的 GraphicsPath.moveTo()GraphicsPath.lineTo()GraphicsPath.curveTo()GraphicsPath.wideLineTo() 以及 GraphicsPath.wideMoveTo() 公用程式方法,可用來輕易地為 GraphicsPath 實體定義這些命令。直接定義或更新命令和資料值時,利用這些公用程式方法可以讓您更加輕鬆。

當您擁有一組 IGraphicsData 實體之後,可以使用 Graphics.drawGraphicsData() 方法呈現這些圖形。Graphics.drawGraphicsData() 方法會透過繪圖 API,依序執行 IGraphicsData 實體的向量:

// stroke object 
var stroke:GraphicsStroke = new GraphicsStroke(3); 
stroke.joints = JointStyle.MITER; 
stroke.fill = new GraphicsSolidFill(0x102020);// solid stroke 
 
// fill object 
var fill:GraphicsGradientFill = new GraphicsGradientFill(); 
fill.colors = [0x0000FF, 0xEEFFEE]; 
fill.matrix = new Matrix(); 
fill.matrix.createGradientBox(70,70, Math.PI/2); 
// path object 
var path:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>()); 
path.commands.push(1,2,2); 
path.data.push(125,0, 50,100, 175,0); 
 
// combine objects for complete drawing 
var drawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>(); 
drawing.push(stroke, fill, path); 
 
// draw the drawing 
graphics.drawGraphicsData(drawing);

藉由修改上述範例中繪圖所使用之路徑內的其中一個值,即可針對更複雜的影像多次重繪圖形:

// draw the drawing multiple times 
// change one value to modify each variation 
graphics.drawGraphicsData(drawing); 
path.data[2] += 200; 
graphics.drawGraphicsData(drawing); 
path.data[2] -= 150; 
graphics.drawGraphicsData(drawing); 
path.data[2] += 100; 
graphics.drawGraphicsData(drawing); 
path.data[2] -= 50;graphicsS.drawGraphicsData(drawing);

透過 IGraphicsData 物件即可定義填色和筆畫樣式,但是您不一定要使用這些填色和筆畫樣式。換句話說,Graphics 類別方法可用於設定樣式,而 IGraphicsData 物件則可用於繪製已儲存的一組路徑,反之亦然。

備註: 除非您是要在原始繪圖上新增內容 (如上述範例中所示),否則,在開始新的繪圖之前,請使用 Graphics.clear() 方法清除舊的繪圖。當您變更某一路徑或一組 IGraphicsData 物件的單一部分時,請重繪整個繪圖以查看變更內容。

使用圖形資料類別時,只要繪製三個以上的點就會呈現填色,這是因為形狀在本質上會在該點結束的緣故。即使填色結束了,但筆畫仍未結束,因此這項行為指令與使用 Graphics.lineTo()Graphics.moveTo() 命令時不同。