使用圖形資料類別

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

增強的繪圖 API 包括 flash.display 套件中的一組類別,這些類別會實作 IGraphicsData 介面。這些類別可當做 value 物件 (資料容器) 使用,代表繪圖 API 的繪圖方法。

透過上述類別,您就可以將完整繪圖儲存在 IGraphicsData 類型的 Vector 物件中 (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() 方法來顯示這些圖形。 drawGraphicsData() 方法會從 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(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO, GraphicsPathCommand.LINE_TO); 
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() 命令時不同。

讀取向量圖像資料

除了繪製顯示物件的向量內容以外,在 Flash Player 11.6 和 Adobe AIR 3.6 及更新版本中,您還可以使用 Graphics 類別的 readGraphicsData( ) 方法取得顯示物件之向量圖像內容的資料形式。這可用來建立圖形的快照,以便在執行階段儲存、複製、建立 Sprite 工作表等等。

呼叫 readGraphicsData() 方法會傳回包含 IGraphicsData 物件的 Vector 實體。這些是與搭配 drawGraphicsData() 方法繪製向量圖像時所用的相同物件。

搭配 readGraphicsData() 方法讀取向量圖像會有一些限制。如需詳細資訊,請參閱 ActionScript 語言參考中的 readGraphicsData() 項目