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イン
CreateJSで遊んでみる 1日目 EaselJS - WebDelog
2015.06.16 記事の内容を全面的に書き直しました。 目次 CreateJS とは何者なのか? EaselJS をはじめるための準備 EaselJS を使うメリット Canvas にはオブジェクトを管理する機能はない Canvas はウォールペイントのようなもの？ ベクター図形の描画がよりわかりやすく便利に 豊富なフィルター機能 実際に触ってみる CreateJS を使うための準備 Stage を配置する EaselJS DisplayObjects Shepeクラスと Graphicsクラスでベクターシェイプを描く Bitmapクラス で画像を読み込む Tickerクラスを使ってアニメーションを実装する MouseEvent でクリックでアクションを起こす 終わりに CreateJS とは何者なのか? CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
