套件 | flash.geom |
類別 | public class Matrix |
繼承 | Matrix Object |
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
matrix
屬性,然後將該 Transform 物件套用成顯示物件的 transform
屬性,藉以在顯示物件上執行各種圖像變形。 這些變形函數包括轉移 (x及 y 重新定位)、旋轉、縮放及傾斜。
這些變形類型統稱為 「仿射變形」。 仿射變形會在變形時保留線段的筆直性,以便讓平行線保持平行。
若要將變形矩陣套用至顯示物件,您可以建立 Transform 物件、將其 matrix
屬性設定為變形矩陣,然後將顯示物件的 transform
屬性設定為該 Transform 物件。 Matrix 物件也可以當做某些方法的參數使用,例如下列方法:
- BitmapData 物件的
draw()
方法 - Graphics 物件的
beginBitmapFill()
、beginGradientFill()
或lineGradientStyle()
方法
變形矩陣物件是具有下列內容的 3 x 3 矩陣:
在傳統的變形矩陣中,u
、v
和 w
屬性提供了額外的功能。 Matrix 類別只能在二維空間中作業,因此會永遠假設 u
和 v
屬性值為 0.0,而 w
屬性值為 1.0。 此矩陣的有效值如下所示:
您可以取得及設定 Matrix 物件中其他全部的六個屬性值。a
、b
、c
、d
、tx
和 ty
。
Matrix 類別支援四種主要的變形類型: 轉移、縮放、旋轉及傾斜。 您可以使用專屬方法來設定其中三種變形,如下表所示:
變形 | 方法 | 矩陣值 | 顯示結果 | 說明 |
---|---|---|---|---|
轉移 (平移) |
translate(tx, ty)
| 會將影像向右移動 tx 像素,再向下移動 ty 像素。 | ||
縮放 |
scale(sx, sy)
| 會調整影像大小,並且在 x 軸上將每一個像素的位置乘以 sx ,以及在 y 軸上乘以 sy 。 | ||
旋轉 |
rotate(q)
| 會將影像旋轉 q 角度,以弧度為單位。 | ||
傾斜或剪影 | 無;必須設定 b 及 c 屬性。 | 會將影像以漸進方式平行挪移至 x 或 y 軸。 Matrix 物件的 b 屬性代表傾斜角度與 y 軸的正切函數值;Matrix 物件的 c 屬性則代表傾斜角度與 x 軸的正切函數值。 |
每個變形函數都能變更目前矩陣的屬性,因此您可以有效地運用來組合多種變形。 若要這樣做,您可以先呼叫一個以上的變形函數,然後再使用該顯示物件的 transform
屬性,將矩陣套用至其顯示物件。
請先使用 new Matrix()
建構函式建立 Matrix 物件,然後才能呼叫 Matrix 物件的方法。
更多範例
相關 API 元素
flash.geom.Transform
flash.display.BitmapData.draw()
flash.display.Graphics.beginBitmapFill()
flash.display.Graphics.beginGradientFill()
flash.display.Graphics.lineGradientStyle()
屬性 | 定義自 | ||
---|---|---|---|
a : Number
在縮放或旋轉影像時,影響像素沿著 x 軸定位的值。 | Matrix | ||
b : Number
在旋轉或傾斜影像時,影響像素沿著 y 軸定位的值。 | Matrix | ||
c : Number
在旋轉或傾斜影像時,影響像素沿著 x 軸定位的值。 | Matrix | ||
constructor : Object
類別物件的參照或是特定物件實體的建構函數。 | Object | ||
d : Number
在縮放或旋轉影像時,影響像素沿著 y 軸定位的值。 | Matrix | ||
tx : Number
要做為根據並沿著 x 軸轉移每一個點的距離。 | Matrix | ||
ty : Number
要做為根據並沿著 y 軸轉移每一個點的距離。 | Matrix |
方法 | 定義自 | ||
---|---|---|---|
以指定參數建立新 Matrix 物件。 | Matrix | ||
傳回新 Matrix 物件 (此矩陣的翻版),其具有和所包含物件完全相同的副本。 | Matrix | ||
將某個矩陣與目前的矩陣連接,有效地結合兩個矩陣的幾何效果。 | Matrix | ||
將 Vector3D 物件複製到呼叫的 Matrix3D 物件的特定欄。 | Matrix | ||
將呼叫的 Matrix 物件的特定欄複製到 Vector3D 物件。 | Matrix | ||
將來源 Point 物件中的所有矩陣資料複製到呼叫的 Matrix 物件。 | Matrix | ||
將 Vector3D 物件複製到呼叫的 Matrix 物件的特定列。 | Matrix | ||
將呼叫的 Matrix 物件的特定列複製到 Vector3D 物件。 | Matrix | ||
包含用來縮放、旋轉和轉移的參數。 | Matrix | ||
createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void
建立 Graphics 類別之 beginGradientFill() 和 lineGradientStyle() 方法預期的特定矩陣樣式。 | Matrix | ||
在變形前的座標空間中指定一個點,並於變形完成後傳回該點的座標。 | Matrix | ||
指出物件是否有已定義的指定屬性。 | Object | ||
會將每個矩陣的屬性設定為導致 null 變形的值。 | Matrix | ||
執行原始矩陣的反向變形。 | Matrix | ||
指出 Object 類別的實體是否位於指定為參數的物件原型鏈中。 | Object | ||
指出指定的屬性是否存在,以及是否可列舉。 | Object | ||
會將旋轉變形套用至 Matrix 物件。 | Matrix | ||
會將縮放變形套用至矩陣。 | Matrix | ||
為迴圈作業設定動態屬性的可用性。 | Object | ||
將 Matrix 的成員設定為指定值
| Matrix | ||
傳回代表此物件的字串,根據地區特定慣例進行格式化。 | Object | ||
傳回文字值,列出 Matrix 物件的屬性。 | Matrix | ||
會傳回將 Matrix 物件所代表之幾何變形套用至指定點的結果。 | Matrix | ||
根據 dx 和 dy 參數的指定值,沿著 x 和 y 軸轉移矩陣。 | Matrix | ||
會傳回指定之物件的基本值。 | Object |
a | 屬性 |
b | 屬性 |
public var b:Number
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
在旋轉或傾斜影像時,影響像素沿著 y 軸定位的值。
範例 ( 如何使用本範例 )
myMatrix
,並設定其 b
值。
import flash.geom.Matrix; var myMatrix:Matrix = new Matrix(); trace(myMatrix.b); // 0 var degrees:Number = 30; var radians:Number = (degrees/180) * Math.PI; myMatrix.b = Math.tan(radians); trace(myMatrix.b); // 0.5773502691896257
c | 屬性 |
public var c:Number
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
在旋轉或傾斜影像時,沿著 x 軸影響像素位置的值。
範例 ( 如何使用本範例 )
myMatrix
,並設定其 c
值。
import flash.geom.Matrix; var myMatrix:Matrix = new Matrix(); trace(myMatrix.c); // 0 var degrees:Number = 30; var radians:Number = (degrees/180) * Math.PI; myMatrix.c = Math.tan(radians); trace(myMatrix.c); // 0.5773502691896257
d | 屬性 |
tx | 屬性 |
ty | 屬性 |
Matrix | () | 建構函式 |
public function Matrix(a:Number = 1, b:Number = 0, c:Number = 0, d:Number = 1, tx:Number = 0, ty:Number = 0)
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
以指定參數建立新 Matrix 物件。 在矩陣標記法中,屬性組織的方式如下所示:
如果您沒有提供任何參數給 new Matrix()
建構函式,它就會使用下列值來建立「單位矩陣」:
在矩陣標記法中,單位矩陣看起來如下:
參數a:Number (default = 1 ) — 在縮放或旋轉影像時,沿著 x 軸影響像素位置的值。
| |
b:Number (default = 0 ) — 在旋轉或傾斜影像時,影響像素沿著 y 軸定位的值。
| |
c:Number (default = 0 ) — 在旋轉或傾斜影像時,沿著 x 軸影響像素位置的值。
| |
d:Number (default = 1 ) — 在縮放或旋轉影像時,沿著 y 軸影響像素位置的值。
| |
tx:Number (default = 0 ) — 要做為根據並沿著 X 軸轉移每一個點的距離。
| |
ty:Number (default = 0 ) — 要做為根據並沿著 y 軸轉移每一個點的距離。
|
範例 ( 如何使用本範例 )
Matrix()
建構函式的方式建立 matrix_1
,另外則將參數傳送給這個建構函式來建立 matrix_2
。 請注意,matrix_1
(建立時沒有使用任何參數) 會產生單位矩陣,並且具有 a
=1、b
=0、c
=0、d
=1、tx
=0、ty
=0 的值。
import flash.geom.Matrix; var matrix_1:Matrix = new Matrix(); trace(matrix_1); // (a=1, b=0, c=0, d=1, tx=0, ty=0) var matrix_2:Matrix = new Matrix(1, 2, 3, 4, 5, 6); trace(matrix_2); // (a=1, b=2, c=3, d=4, tx=5, ty=6)
clone | () | 方法 |
concat | () | 方法 |
public function concat(m:Matrix):void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
將某個矩陣與目前的矩陣連接,有效地結合兩個矩陣的幾何效果。 以數學觀點來說,連接兩個矩陣與使用矩陣乘法來結合兩個矩陣是一樣的意思。
例如,如果矩陣 m1
將物件放大四倍,而矩陣 m2
以 1.5707963267949 的弧度 (Math.PI/2
) 旋轉物件,m1.concat(m2)
便會將 m1
轉換成可將物件放大四倍同時將物件旋轉 Math.PI/2
弧度的矩陣。
此方法會以連接矩陣取代原始矩陣。 如果您要連接兩個矩陣,而不更改任一原始矩陣,請先使用 clone()
方法來複製原始矩陣,如「類別範例」一節所示。
參數
m:Matrix — 要連接到原始矩陣的矩陣。
|
copyColumnFrom | () | 方法 |
copyColumnTo | () | 方法 |
copyFrom | () | 方法 |
copyRowFrom | () | 方法 |
copyRowTo | () | 方法 |
createBox | () | 方法 |
public function createBox(scaleX:Number, scaleY:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
包含用來縮放、旋轉和轉移的參數。 當套用至矩陣時,會根據這些參數設定矩陣的值。
使用 createBox()
方法讓您取得的矩陣,會與連續套用 identity()
、rotate()
、scale()
和 translate()
方法後所獲得的矩陣相同。 例如,mat1.createBox(2,2,Math.PI/4, 100, 100)
的效果與下列程式碼相同:
import flash.geom.Matrix; var mat1:Matrix = new Matrix(); mat1.identity(); mat1.rotate(Math.PI/4); mat1.scale(2,2); mat1.translate(10,20);
參數
scaleX:Number — 水平縮放的係數。
| |
scaleY:Number — 垂直縮放的係數。
| |
rotation:Number (default = 0 ) — 旋轉量,以弧度為單位。
| |
tx:Number (default = 0 ) — 沿著 x 軸向右轉移 (移動) 的像素數。
| |
ty:Number (default = 0 ) — 沿著 y 軸向下轉移 (移動) 的像素數。
|
相關 API 元素
範例 ( 如何使用本範例 )
myMatrix
的 createBox()
方法,設定它的 x 縮放、y 縮放、旋轉、x 位置和 y 位置。
package { import flash.display.Shape; import flash.display.Sprite; import flash.geom.Matrix; import flash.geom.Transform; public class Matrix_createBox extends Sprite { public function Matrix_createBox() { var myMatrix:Matrix = new Matrix(); trace(myMatrix.toString()); // (a=1, b=0, c=0, d=1, tx=0, ty=0) myMatrix.createBox(1, 2, Math.PI/4, 50, 100); trace(myMatrix.toString()); // (a=0.7071067811865476, b=1.414213562373095, c=-0.7071067811865475, // d=1.4142135623730951, tx=50, ty=100) var rectangleShape:Shape = createRectangle(20, 80, 0xFF0000); addChild(rectangleShape); var rectangleTrans:Transform = new Transform(rectangleShape); rectangleTrans.matrix = myMatrix; } public function createRectangle(w:Number, h:Number, color:Number):Shape { var rect:Shape = new Shape(); rect.graphics.beginFill(color); rect.graphics.drawRect(0, 0, w, h); addChild(rect); return rect; } } }
createGradientBox | () | 方法 |
public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會建立 Graphics 類別之 beginGradientFill()
和 lineGradientStyle()
方法預期的特定矩陣樣式。 寬度及高度會相應於 scaleX
/scaleY
這一對值來進行縮放,並以一半的寬度及高度偏移 tx
/ty
值。
例如,假設漸層具有下列特性:
GradientType.LINEAR
- 兩種顏色 (綠色和藍色),並將比例陣列設定為
[0, 255]
SpreadMethod.PAD
InterpolationMethod.LINEAR_RGB
下列圖例將說明使用 createGradientBox()
方法搭配不同參數設定來定義矩陣的漸層:
createGradientBox() 設定 | 產生的漸層 |
---|---|
width = 25; height = 25; rotation = 0; tx = 0; ty = 0; | |
width = 25; height = 25; rotation = 0; tx = 25; ty = 0; | |
width = 50; height = 50; rotation = 0; tx = 0; ty = 0; | |
width = 50; height = 50; rotation = Math.PI / 4; // 45 degrees tx = 0; ty = 0; |
參數
width:Number — 漸層方塊的寬度。
| |
height:Number — 漸層方塊的高度。
| |
rotation:Number (default = 0 ) — 旋轉量,以弧度為單位。
| |
tx:Number (default = 0 ) — 沿著 x 軸向右轉移的距離,以為像素單位。 這個值是根據 width 參數的一半進行偏移。
| |
ty:Number (default = 0 ) — 沿著 y 軸向下轉移的距離,以為像素單位。 這個值是根據 height 參數的一半進行偏移。
|
相關 API 元素
範例 ( 如何使用本範例 )
myMatrix
的 createBox()
方法,設定它的 x 縮放、y 縮放、旋轉、x 位置和 y 位置。
package { import flash.display.GradientType; import flash.display.Sprite; import flash.geom.Matrix; public class Matrix_createGradientBox extends Sprite { public function Matrix_createGradientBox() { var myMatrix:Matrix = new Matrix(); trace(myMatrix.toString()); // (a=1, b=0, c=0, d=1, tx=0, ty=0) myMatrix.createGradientBox(200, 200, 0, 50, 50); trace(myMatrix.toString()); // (a=0.1220703125, b=0, c=0, d=0.1220703125, tx=150, ty=150) var colors:Array = [0xFF0000, 0x0000FF]; var alphas:Array = [100, 100]; var ratios:Array = [0, 0xFF]; this.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, myMatrix); this.graphics.drawRect(0, 0, 300, 200); } } }
deltaTransformPoint | () | 方法 |
identity | () | 方法 |
public function identity():void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會將每個矩陣的屬性設定為導致 null 變形的值。 透過套用單位矩陣所轉換的物件將與原始矩陣完全相同。
呼叫 identity()
方法之後,產生的矩陣便具有下列屬性: a
=1, b
=0, c
=0, d
=1, tx
=0, ty
=0.
在矩陣標記法中,單位矩陣看起來如下:
invert | () | 方法 |
public function invert():void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
執行原始矩陣的反向變形。 您可以將反矩陣套用至物件,以還原套用原始矩陣所產生的變形。
範例 ( 如何使用本範例 )
doubleScaleMatrix
的 invert()
方法來建立 halfScaleMatrix
。 然後證明這兩個矩陣互為對方的反矩陣 -- 也就是,可以還原另一個矩陣所產生的任何變形 -- 方式是建立相等於 noScaleMatrix
的 originalAndInverseMatrix
。
package { import flash.display.Shape; import flash.display.Sprite; import flash.geom.Matrix; import flash.geom.Transform; public class Matrix_invert extends Sprite { public function Matrix_invert() { var rect0:Shape = createRectangle(20, 80, 0xFF0000); var rect1:Shape = createRectangle(20, 80, 0x00FF00); var rect2:Shape = createRectangle(20, 80, 0x0000FF); var rect3:Shape = createRectangle(20, 80, 0x000000); var trans0:Transform = new Transform(rect0); var trans1:Transform = new Transform(rect1); var trans2:Transform = new Transform(rect2); var trans3:Transform = new Transform(rect3); var doubleScaleMatrix:Matrix = new Matrix(2, 0, 0, 2, 0, 0); trans0.matrix = doubleScaleMatrix; trace(doubleScaleMatrix.toString()); // (a=2, b=0, c=0, d=2, tx=0, ty=0) var noScaleMatrix:Matrix = new Matrix(1, 0, 0, 1, 0, 0); trans1.matrix = noScaleMatrix; rect1.x = 50; trace(noScaleMatrix.toString()); // (a=1, b=0, c=0, d=1, tx=0, ty=0) var halfScaleMatrix:Matrix = doubleScaleMatrix.clone(); halfScaleMatrix.invert(); trans2.matrix = halfScaleMatrix; rect2.x = 100; trace(halfScaleMatrix.toString()); // (a=0.5, b=0, c=0, d=0.5, tx=0, ty=0) var originalAndInverseMatrix:Matrix = doubleScaleMatrix.clone(); originalAndInverseMatrix.concat(halfScaleMatrix); trans3.matrix = originalAndInverseMatrix; rect3.x = 150; trace(originalAndInverseMatrix.toString()); // (a=1, b=0, c=0, d=1, tx=0, ty=0) } public function createRectangle(w:Number, h:Number, color:Number):Shape { var rect:Shape = new Shape(); rect.graphics.beginFill(color); rect.graphics.drawRect(0, 0, w, h); addChild(rect); return rect; } } }
rotate | () | 方法 |
scale | () | 方法 |
setTo | () | 方法 |
toString | () | 方法 |
transformPoint | () | 方法 |
translate | () | 方法 |
MatrixExample
類別,示範如何建立一個大型填滿漸層的正方形。 您可以使用下列步驟:
- 應用程式會建立新的 Matrix 物件
myMatrix
,接著使用trace()
方法來輸出myMatrix
物件的預設屬性值。 - 應用程式會呼叫
createGradientBox()
,並將它的width
和height
參數設定為 200 個像素、沒有旋轉且沿著 x 和 y 軸轉移的距離為 50 個像素。 - 應用程式會再次列印
myMatrix
物件,以顯示呼叫createGradientBox()
後的變更。 - 應用程式會設定三個變數,以控制漸層方塊的填滿方式:
colors
:將漸層顏色的範圍設定為介於純紅色和純藍色之間。alphas
:將不透明度設定為實心。ratios
:將紅色和藍色的顏色分佈設定為相等。
- 應用程式會呼叫圖像方法
beginGradientFill()
對myMatrix
物件進行操作,接著物件會呼叫lineTo()
方法以產生填滿漸層的方塊。
package { import flash.geom.Matrix; import flash.display.Sprite; import flash.display.GradientType; public class MatrixExample extends Sprite { public function MatrixExample() { var myMatrix:Matrix = new Matrix(); trace(myMatrix.toString()); // (a=1, b=0, c=0, d=1, tx=0, ty=0) myMatrix.createGradientBox(200, 200, 0, 50, 50); trace(myMatrix.toString()); // (a=0.1220703125, b=0, c=0, d=0.1220703125, tx=150, ty=150) var colors:Array = [0xFF0000, 0x0000FF]; var alphas:Array = [1, 1]; var ratios:Array = [0, 0xFF]; graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, myMatrix); graphics.lineTo(0, 300); graphics.lineTo(300, 300); graphics.lineTo(300, 0); graphics.lineTo(0, 0); } } }
Tue Jun 12 2018, 03:47 PM Z