FN1210005 - EaselJSのMatrix2Dクラスを使ったインスタンスの変形 - HTML5 : テクニカルノート
Matrix2Dクラスは、2次元平面の座標を数学の行列により変換します。Matrix2Dクラスの変換行列を使うと、インスタンスに移動や伸縮、回転、傾斜などの変形を組合わせて加えることができます。「EaselJSを使ったインスタンスの傾斜・伸縮・移動」と同じような変形を、今度はMatrix2Dクラスという別の道具で試してみましょう。 01 読込んだ画像の3つの角にハンドルを置く 前出「EaselJSを使ったインスタンスの傾斜・伸縮・移動」のコード001では、画像の右上角に置いたハンドルでインスタンスを傾斜および伸縮させました。本稿ではハンドルを3つに増やして、Matrix2Dクラスによりインスタンスの座標変換を行います(図001)[*1]。 図001■3つのハンドルをドラッグすると画像が変形する まず、PNGファイル(image.png)はHTMLドキュメントと同じ場所のフォルダに(imag
FN1308001 | EaselJSのMatrix2Dオブジェクトの変換行列を適用する | HTML5 : テクニカルノート
説明 Matrix2Dオブジェクトの変換行列は、DisplayObjectやPointのインスタンスに適用して座標変換が加えられます。また、変換した後のプロパティ値をObjectインスタンスに納め、他の座標変換に用いることもできます。 Matrix2Dオブジェクトの変換行列でDisplayObjectインスタンスを変形したいときは、Matrix2D.decompose()メソッドの引数にインスタンスを渡して呼出します。すると、変換行列から導かれる位置や伸縮、傾斜、回転などのプロパティがObjectインスタンスに与えられます。 Matrix2Dオブジェクト.decompose(DisplayObjectインスタンス) Matrix2D.decompose()メソッドの引数は、DisplayObjectインスタンスにはかぎりません。また、引数を省くとプロパティが納められた新たなObjectイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
