說明

Matrix 類別代表變形矩陣,可決定如何從一個座標空間,將各點對應到另一個空間。

您可以在顯示物件上執行各種圖像變形,如下所示:

  • 設定 Matrix 物件的屬性
  • 將 Matrix 物件套用到 Transform 物件的矩陣屬性
  • 套用 Transform 物件,做為顯示物件的變形屬性。

這些變形函數包括轉譯 (x 及 y 重新定位)、旋轉及縮放。

變形矩陣

這些變形類型統稱為「仿射變形」。仿射變形會在變形時保留線段的筆直性,以便讓平行線保持平行。

變形矩陣物件是具備下列內容的 3 x 3 矩陣:

| a c tx |
| b d ty |
| u v w  |

在傳統的變形矩陣中,u、v 和 w 屬性提供了額外的功能。Matrix 類別只能在二維空間中作業。因此,會永遠假設 u 和 v 屬性值為 0.0,而 w 屬性值為 1.0。矩陣的有效值如下:

| a c tx |
| b d ty |
| 0 0 1  |

語法

new flwebgl.geom.Matrix(values)

參數

名稱類型說明
values數字[](選擇性) 以格式 [a b c d tx ty] 定義矩陣值的陣列。如果未指定,則矩陣會設定為單位。

方法

clone()

說明

    這個方法會傳回 Matrix 實體的副本。

傳回值

  • Matrix 實體的副本。
  • 類型 - Matrix  

concat(matrix)

說明

    這個方法會將提供的矩陣與目前的矩陣連接,有效地結合兩個矩陣的幾何效果。

參數

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix  

範例

這個範例會連接旋轉矩陣和縮放矩陣。

名稱類型說明
matrixMatrix
要相乘的矩陣
var m1 = new flwebgl.geom.Matrix();
m1.rotate(45 * Math.PI / 180);

var m2 = new flwebgl.geom.Matrix();
m2.scale(2, 2);

m1.concat(m2);

copy(matrix)

說明

    這個方法會將指定的矩陣複製到這個矩陣。

參數

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix
名稱類型說明
matrixMatrix要從中複製屬性的矩陣

equals(mat)

說明

    這個方法會檢查指定的矩陣是否具有與這個實體相同的值。

參數

傳回值

  • 類型 - boolean
名稱類型說明
matMatrix要比較的矩陣

getValues()

說明

    這個方法會傳回矩陣中的元素值。

傳回值

  • 以格式 [a b c d tx ty] 定義矩陣值的陣列
  • 類型 - number[]

範例

這個範例會取得矩陣的值,並以係數 0.5 將矩陣修改為傾斜。

var m = new flwebgl.geom.Matrix();
var arr = m.getValues();
arr[1] = 0.5;
m.setValues(arr);

identity()

說明

    這個方法會將矩陣設定為單位矩陣。

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix

invert()

說明

    這個方法會反轉矩陣,實際上,反轉的矩陣會套用反向變形。

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix

isIdentity()

說明

    如果矩陣是單位矩陣,則這個方法會指出「true」。

傳回值

  • 類型 - boolean

rotate(angle)

說明

    這個方法會將旋轉變形套用至矩陣。

參數

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix

範例

這個範例會建立已初始化為單位矩陣的新 Matrix 實體,並將它旋轉 45 度。

名稱類型說明
angle數字角度,以弧度為單位。若要使用度數,請乘以 Math.PI/180。
var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

說明

    這個方法會將縮放變形套用至矩陣。

參數

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix

範例

這個範例會建立已初始化為單位矩陣的新 Matrix 實體,並以係數 2 水平及垂直縮放。

名稱類型說明
x數字水平縮放比例係數。
y數字垂直縮放比例係數。
var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

setValues(values)

說明

    這個方法會設定矩陣的元素值。

參數

範例

請參閱 getValues() 函數下的範例。

名稱類型說明
values
數字[]以格式 [a b c d tx ty] 定義矩陣值的陣列。

transformPoint(point)

說明

    這個方法會根據這個矩陣,將點變形。

參數

傳回值

  • 變形點。
  • 類型 - Point
名稱類型說明
pointPoint要變形的點。

transformRect(rect)

說明

    這個方法會根據這個矩陣,將矩形的全部四個點變形。

參數

傳回值

  • 變形的矩形。
  • 類型 - Rect
名稱類型說明
rectRect
要變形的矩形。

translate(dx, dy)

說明

    這個方法會在 x 和 y 軸上轉譯矩陣。

參數

傳回值

  • 這個矩陣。對於鏈結方法呼叫很有用。
  • 類型 - Matrix
名稱類型說明
dx數字沿 X 軸向右移動的距離。
dy數字沿 Y 軸向右移動的距離。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策