2013年7月31日水曜日

TypeScriptというかECMAScriptというかHTML5仕様のそれで2Dの射影変換行列などの3x3Matrixを扱う楽な実装

SVGMatrixを使え(`・ω・´)シャキーン
HTML5仕様はSVG1.1を含んでいるのでHTML5に対応したプラットフォームのES5ならSVGMatrixオブジェクトが使えるという話。もちろんTypeScriptでも使える。

SVGMatrixは2D変換行列用に設計された3x3Matrixで、要素へのアクセスはメンバー変数a, b, c, d, e, fで行う。3x3と言っても実際問題の都合3行目は{0, 0, 1}固定でユーザーが操作できる行列構造部分は3x2なので、汎用3x3行列としては使えず、インデックスも6つ。

それだけなら「使え」と言うほどの事は無いのだけど、translate, scale, rotateや、flipX, flipY、ほか幾つかの便利な2D射影変換行列らしいメンバー関数が定義されている。つまり便利。


<蛇足>

SVG1.1にSVGVector2DだとかSVGVector3DだとかSVGMatrix4x4だとかSVGQuaternionなんかはありません。残念。

0 件のコメント:

コメントを投稿