FN1210005 - EaselJSのMatrix2Dクラスを使ったインスタンスの変形 - HTML5 : テクニカルノートMatrix2Dクラスは、2次元平面の座標を数学の行列により変換します。Matrix2Dクラスの変換行列を使うと、インスタンスに移動や伸縮、回転、傾斜などの変形を組合わせて加えることができます。「EaselJSを使ったインスタンスの傾斜・伸縮・移動」と同じような変形を、今度はMatrix2Dクラスという別の道具で試してみましょう。 01 読込んだ画像の3つの角にハンドルを置く 前出「EaselJSを使ったインスタンスの傾斜・伸縮・移動」のコード001では、画像の右上角に置いたハンドルでインスタンスを傾斜および伸縮させました。本稿ではハンドルを3つに増やして、Matrix2Dクラスによりインスタンスの座標変換を行います(図001)[*1]。 図001■3つのハンドルをドラッグすると画像が変形する まず、PNGファイル(image.png)はHTMLドキュメントと同じ場所のフォルダに(imag
