JavaScriptMatrix2Dクラスは、2次元平面の座標を数学の行列により変換します。Matrix2Dクラスの変換行列を使うと、インスタンスに移動や伸縮、回転、傾斜などの変形を組合わせて加えることができます。同じような変形を、今度はMatrix2Dクラスという別の道具で試してみましょう。コード001では、画像の右上角に置いたハンドルでインスタンスを傾斜および伸縮させました。本稿ではハンドルを3つに増やして、Matrix2Dクラスによりインスタンスの座標変換を行います(図001)[*1]。図001■3つのハンドルをドラッグすると画像が変形するまず、PNGファイル(image.png)はHTMLドキュメントと同じ場所のフォルダに(images)納め、PreloadJSクラスを用いて読込み、Bitmapインスタンスに納めてCanvasの真ん中に置きます(図002)。コード001と変わりません。書上げたscript要素全体は、後にコード001として掲げます。抜書きして示すステートメントの行番号は、後掲コード001にもとづきます。2;stage.update();}図002■画像ファイルを読込んでCanvasの真ん中に置くつぎに、ドラッグするハンドルのShapeインスタンスに円を描いて、画像が納められたBitmapインスタンスの3つの角に置きます(図003)。コード001と中身は変わりません。つぎの項から、Matrix2Dクラスの変換行列を用いたインスタンスの変形についてご説明します。傾斜は、インスタンスの矩形の境界領域を平行四辺形に変形します。向かい合う2辺は平行のままで、台形に変えることはできません。いわゆる「パースペクティブ」はかけられないのです。そのため、インスタンスの3つの角の座標が定まれば、残りの4つ目の位置は決まります。「行列」はテーブル(表)のように縦横に並べた数値を括弧([]または())にくくって表し、行列の中の各数値は「成分」と呼ばれます。行数と列数が等しい行列を「正方行列」といいます。Matrix2Dクラスの変換行列は、以下のような3行×3列の正方行列です。1]は行列計算の便宜上加えられたもので、つねにこの値に決まっています。実質は2行分の6成分からなります。1これら6成分の値を変えることにより、平行移動や伸縮、回転、傾斜などの座標変換ができます(表001)。これらの中から今回のお題に使う変換は、平行移動と伸縮および傾斜です。したがって、変換行列のa、b、c、d、tx、tyの6成分をすべて計算して定めます。16つの成分の計算のうち、平行移動と伸縮はDisplayObjectクラスのプロパティ(x、y、scaleX、scaleY)の定め方と同じなのでご説明はいらないでしょう。傾斜は、プロパティ(scaleXとscaleY)が角度で定められるのに対して、成分値の傾斜率は伸縮率と同じように比率で決まります。わかりにくいかもしれません。6成分の計算式を並べてみると、きれいな関係があることに気づくでしょう。図004のように3つのハンドルの座標を定め、元イメージから定まるデフォルトの幅と高さをそれぞれwおよびhとおけば、3点の座標から各成分値がつぎのように導かれます。Matrix2Dクラスによりインスタンスを座標変換するそれでは、Matrix2Dクラスにより、インスタンスの座標をどう変換するかです。Matrix2D()コンストラクタには、6成分を引数に渡します。6成分は同じ名前(a、b、c、d、tx、ty)でMatrix2Dオブジェクトのプロパティに備わっていますから、後でそれぞれの値を与えても構いません。コンストラクタの引数を省くと、デフォルトの単位行列のMatrix2Dオブジェクトがつくられます。ty)Matrix2Dは数学的な変換行列のデータとそれを操作するプロパティやメソッドが備えられているオブジェクトで、Canvasに表示するDisplayObjectインスタンスとは切離されており、インスタンスを直ちに変形する訳ではありません。変形するインスタンスにMatrix2Dオブジェクトの変換行列を適用するのがMatrix2D.decompose()メソッドです。Matrix2Dオブジェクト.decompose(変形するオブジェクト)Matrix2D.decompose()メソッドは、Matrix2Dオブジェクトから変換のためのプロパティ値を導いて、引数のインスタンスのプロパティに与えます。変換のためのプロパティとは、x、y、scaleX、scaleY、skewX、skewYの6つです。平行移動と伸縮および傾斜(回転も含む)が一度に行えるのです。Matrix2Dクラスのこのふたつのメソッドを使うと、インスタンスがつぎのようにして変形できます。インスタンスを変形する元締めの関数(transformBitmap())が、3つのハンドルの座標を調べて、本稿のお題の主菜となる座標変換の関数(transform())を呼出します(第80〜83行目)。座標変換の関数は、引数に受取った3座標から前述の計算式で6成分値を定め(第95〜101行目)、Matrix2D.decompose()メソッドによりインスタンスを変形しています(第102行目)。myImage.height;matrix.decompose(myBitmap);stage.update();}これでインスタンスは、ドラッグする3つのハンドルに合わせて、Matrix2Dクラスの変換行列により変形されます(図005)。書上げたscript要素全体は、以下のコード001のとおりです。考え方に沿って、3つのハンドルの座標からDisplayObjectクラスのプロパティx、y、scaleX、scaleY、skewX、skewYを定めて変形したサンプルがあります。それぞれの変換のための関数(transform())を互いに比べてみるとよいでしょう。