幾何範例:將矩陣變形套用至顯示物件

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

DisplayObjectTransformer 樣本應用程式會示範使用 Matrix 類別進行顯示物件之變形作業的數項功能,其中包括:

  • 旋轉顯示物件

  • 縮放顯示物件

  • 轉譯 (重新定位) 顯示物件

  • 傾斜顯示物件

此應用程式可提供介面,用來調整矩陣變形的參數,如下所示:

當使用者按一下「變形」按鈕時,應用程式便會套用正確的變形作業。

原始的顯示物件,以及旋轉 -45° 並縮放 50% 之後的顯示物件

若要取得此樣本的應用程式檔案,請參閱 www.adobe.com/go/learn_programmingAS3samples_flash_tw。您可以在 Samples/DisplayObjectTransformer 檔案夾中找到 DisplayObjectTransformer 應用程式檔案,此應用程式是由下列檔案組成:

檔案

說明

DisplayObjectTransformer.mxml

DisplayObjectTransformer.fla

主應用程式檔案,在 Flash 中為 FLA,在 Flex 中為 MXML。

com/example/programmingas3/geometry/MatrixTransformer.as

類別,其中包含要用來套用矩陣變形的方法。

img/

目錄,其中包含此應用程式所使用的樣本影像檔。

定義 MatrixTransformer 類別

MatrixTransformer 類別包含靜態方法,可套用 Matrix 物件的幾何變形。

transform() 方法

transform() 方法包含下列每一個項目的參數:

  • sourceMatrix — 輸入矩陣,也就是此方法要加以變形的矩陣

  • xScaleyScalexy 縮放係數

  • dxdyxy 轉譯的像素量

  • rotation — 旋轉的角度量

  • skew — 傾斜係數 (百分比)

  • skewType — 傾斜方向,為 "right""left"

傳回值為所產生的矩陣。

transform() 方法會呼叫此類別的下列靜態方法:

  • skew()

  • scale()

  • translate()

  • rotate()

其中每一個都會傳回已套用變形的來源矩陣。

skew() 方法

skew() 方法會調整矩陣的 bc 屬性,藉以傾斜矩陣。選擇性參數 unit 會判斷用來定義傾斜角度的單位。如有必要,這個方法會將 angle 值轉換為弧度:

if (unit == "degrees")  
{ 
    angle = Math.PI * 2 * angle / 360; 
} 
if (unit == "gradients") 
{ 
    angle = Math.PI * 2 * angle / 100; 
}

建立 skewMatrix Matrix 物件並加以調整,以便套用傾斜變形。一開始,它是一個單位矩陣,如下所示:

var skewMatrix:Matrix = new Matrix();

skewSide 參數會決定是哪一邊套用了傾斜變形。如果將它設定為 "right",下列程式碼就會設定該矩陣的 b 屬性:

skewMatrix.b = Math.tan(angle);

否則,就會調整 Matrix 的 c 屬性來傾斜底端,如下所示:

skewMatrix.c = Math.tan(angle);

接著這兩個矩陣就會結合,將產生的傾斜變形套用至現有的矩陣,如下列範例所示:

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

scale() 方法

如下列範例所示,如果所提供的縮放係數為百分比,則 scale() 方法首先會調整此係數,然後再使用此矩陣物件的 scale() 方法:

if (percent) 
{ 
    xScale = xScale / 100; 
    yScale = yScale / 100; 
} 
sourceMatrix.scale(xScale, yScale); 
return sourceMatrix;

translate() 方法

translate() 方法只會藉由呼叫此矩陣物件的 translate() 方法來套用 dxdy 轉譯係數,如下所示:

sourceMatrix.translate(dx, dy); 
return sourceMatrix;

rotate() 方法

rotate() 方法會將輸入旋轉係數轉換為弧度 (如果所提供的係數為角度或斜率),然後呼叫此矩陣物件的 rotate() 方法:

if (unit == "degrees") 
{ 
    angle = Math.PI * 2 * angle / 360; 
} 
if (unit == "gradients") 
{ 
    angle = Math.PI * 2 * angle / 100; 
} 
sourceMatrix.rotate(angle); 
return sourceMatrix;

從應用程式呼叫 MatrixTransformer.transform() 方法

此應用程式包含使用者介面,可用來從使用者處取得變形參數。然後,再將這些值以及顯示物件之 transform 屬性的 matrix 屬性傳遞給 Matrix.transform() 方法,如下所示:

tempMatrix = MatrixTransformer.transform(tempMatrix,  
    xScaleSlider.value,  
    yScaleSlider.value, 
    dxSlider.value,  
    dySlider.value, 
    rotationSlider.value, 
    skewSlider.value,  
    skewSide );

接下來,此應用程式會將傳回值套用至顯示物件之 transform 屬性的 matrix 屬性,觸發變形作業:

img.content.transform.matrix = tempMatrix;