説明

Matrix クラスは、2 つの座標空間の間におけるポイントのマッピング方法を決定する変換マトリックス (変換行列) を表します。

次のように、表示オブジェクト上の様々なグラフィック変換を実行できます。

  • Matrix オブジェクトのプロパティを設定する
  • その Matrix オブジェクトを Transform オブジェクトの matrix プロパティに適用する
  • Transform オブジェクトを表示オブジェクトの変換プロパティとして適用する

これらの変換機能には、平行移動(x と y の位置変更)、回転、拡大 / 縮小などが含まれます。

変換行列

このような変換をアフィン変換と言います。アフィン変換では、変換中に線分の直線性が保たれるので、平行線は平行のままになります。

変換行列オブジェクトは、次の内容を備えた 3 x 3 の行列です。

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

従来の変換行列では、u、v、および w プロパティによって特別な機能を提供します。Matrix クラスは、2 次元空間でのみ動作します。そのため、常に、プロパティ値 u および v は 0.0、プロパティ値 w は 1.0 を前提にしています。行列で有効な値を次に示します。

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

シンタックス

new flwebgl.geom.Matrix(values)

パラメーター

名前タイプ説明
valuesnumber[](オプション)行列の値を [a b c d tx ty] の形式で定義する配列。指定しない場合、マトリックスは単位マトリックスに設定されます。

方法

clone()

説明

    このメソッドは、Matrix インスタンスのクローンを返します。

戻り値

  • Matrix インスタンスのクローン。
  • タイプ - Matrix  

concat(matrix)

説明

    このメソッドは、指定された行列を現在の行列と連結して、2 つの行列の図形効果を効果的に組み合わせます。

パラメーター

戻り値

  • この行列。メソッドの呼び出しをチェーン化するのに便利です。
  • タイプ - 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 度回転します。

名前タイプ説明
anglenumberラジアン単位の角度。度を使用するには、Math.PI/180 で乗算します。
var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

説明

    このメソッドは、行列に拡大および縮小による変換を適用します。

パラメーター

戻り値

  • この行列。メソッドの呼び出しをチェーン化するのに便利です。
  • タイプ - Matrix

この例では、単位マトリックスに初期化された新しい Matrix インスタンスを作成し、垂直と水平の両方向に 2 倍に拡大します。

名前タイプ説明
xnumber水平方向の拡大・縮小率。
ynumber垂直方向の拡大・縮小率。
var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

setValues(values)

説明

    このメソッドは、行列のエレメントの値を設定します。

パラメーター

getValues() 関数の例を参照してください。

名前タイプ説明
values
number[]行列の値を [a b c d tx ty] の形式で定義する配列。

transformPoint(point)

説明

    このメソッドは、この行列に従ってポイントを変換します。

パラメーター

戻り値

  • 変換されたポイント。
  • タイプ - Point
名前タイプ説明
pointPoint変換するポイント。

transformRect(rect)

説明

    このメソッドは、この行列に従って、長方形の 4 つのすべてのポイントを変換します。

パラメーター

戻り値

  • 変換された Rect。
  • タイプ - Rect
名前タイプ説明
rectRect
変換する長方形。

translate(dx, dy)

説明

    このメソッドは、x 軸および y 軸に行列を移動します。

パラメーター

戻り値

  • この行列。メソッドの呼び出しをチェーン化するのに便利です。
  • タイプ - Matrix
名前タイプ説明
dxnumberx 軸に沿って右方向に移動する量。
dynumbery 軸に沿って下方向に移動する量。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー