使用圖形資料類別

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() 項目 。