初めて学ぶCreateJS

インスタンスをクリックした座標で回す

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンスを任意の座標で回すやり方のひとつ目は、取りあえず回してから、位置を直すという考え方です。
講師:
11:56

字幕

キャンバスに置いたインスタンスを クリックしたら回るように スクリプトを書きます 但しここでのポイントは回転の中心は クリックした座標を軸にします どこをクリックしても そのクリックした場所で 回るということです まずはインスタンスをクリックしたら 単純に回るようにしてみましょう 現在の JavaScript コードは 星形のシェイプを描いているだけで マウスの操作に関する処理は 書かれていません 簡単に確認します まず canvas 要素に対して stage を作ったら createShape という関数を 呼びだします ここで星形のインスタンスを作ります 引数にはインスタンスの xy 座標 これは中心になります そして星形を塗る 塗り色です 関数はここで定めてあって shape インスタンスを作ったら stage に addChild メソッドで 表示リストに加えて 引数に指定された xy 座標に 位置を定めます そしてインスタンスに星を描くという メソッドを呼びだします この関数は shape の graphics プロパティ つまり graphics オブジェクトと それから塗り色を引数で受け取ったまま バケツリレーのように渡します そして星形を描く draw の関数は graphics オブジェクトと色を受け取り 線の色それから塗り色を 指定された引数の値に設定したら drawPolyStar のメソッドで 星形を描いて stage の描画を更新しています インスタンスをクリックしたら というイベントハンドラを設定しましょう まずインスタンスは myShape です そしてクリックは onClick のイベントです そしてハンドラはこれから定めますが 回転ですので rotate としておきます このハンドラを定めましょう rotate です 今の所使えませんが イベントオブジェクトが受け取れますので 受け取っておきます そして回転は shape のインスタンスの rotation プロパティを そうですね 度数で15度回転させることにします 忘れていけないのが stage の update です 確認してみましょう 保存して 「ファイル」メニューから 「ムービープレビュー」です 「ブラウザでプレビュー」です キャンバスに星形のシェイプが 表示されましたので クリックして確認してみましょう クリックすると 星形のインスタンスが回転します 但し回転の中心は常に インスタンスの基準点です この星形の場合には基準点を 中心にとってありますから どこをクリックしても必ず 中心を軸に回ります つまり中心がずれませんね これをどうやってクリックした座標で回すか ということがテーマになります 考え方をまず先に 図で示します インスタンスはどこをクリックしようが 基準点を軸に回ります わかりやすいように インスタンスの基準点が左上角にあるとします そして例えば このペンギンの 目の辺りをクリックしたとしましょう 回転させると このインスタンスは 基準点 つまり左上角を軸に回転します そうすると元々クリックした ステージ上の キャンバス上の座標と それからインスタンスの実際に クリックした目の位置がずれますね これを直せばいいということになります つまりクリックしたステージ上の座標と それが回転して動いてしまった インスタンス上の座標の ずれがあるわけですから そのずれを直すように移動すればいいと つまり回転した後 クリック座標の位置を直す ということです クリックしたインスタンスを とりあえず回してしまってから 元々クリックした ステージ上の座標とインスタンス上のずれを 直すという処理をしようとすると ステージから見た座標と インスタンスから見た座標の間で 座標の変換をすることが必要になります そのために2つのメソッドを ご紹介します 1つ目は globalToLocal というメソッドです 基準になるインスタンスに対して 呼びだします そうすると global 渡した xy 座標が ステージ上の座標だとして このオブジェクトから見たら つまり local です どんな座標になるかという 座標変換をします 変換した座標は Point オブジェクトという形で返されます Point オブジェクトというのは xy 座標2つを持ったオブジェクトです 座標が欲しい時には Point オブジェクトに対して .x で x 座標 .y で y 座標が得られます もう1つは反対方向の LocalToGlobal です やはり基準になるオブジェクト に対して呼びだします 但し今度は渡した座標が インスタンス上の local な座標であるとして それをステージから見た global な座標に 変換して返します やはり返されるのは Point オブジェクトです この2つのメソッドを使えば ステージとインスタンスの間での 座標が変換できます onClick イベントハンドラの rotate に手を加えます まず クリックしたマウス座標を調べます 変数は mouseX これはイベントオブジェクトから プロパティの stageX で調べます 同様に y 座標を コピーしてしまいましょう x 座標についての処理をコピーして y で stageY です これがクリックされた座表ですね それをインスタンスから見た座標に 置き換えます それはステージから見た座標 global ですね をインスタンスから見た座標 local に直します 渡すのはマウスの xy 座標です y 座標 それを変数に入れます mousePoint としておきましょう インスタンスを rotation プロパティで 回転させます そうすると初めにクリックした インスタンスから見た座標がずれます そのずれたインスタンスから見た座表を ステージから見た座標に 変換する必要があります また shape インスタンスに対して 今度は LocalToGlobal ですね 先程とっておいた mousePoint マウスポインタの x 座標と y 座標 これを ステージから見た座標に置き換えます 変数は offset としましょう そうしたら この座標を shape のインスタンスに対して 補正します ずれを直しますので 「+=」 マウスポインタの x 座標から ずれた座標ですね この差を求めます x 座標の差をもとめて足しこみます y 座標についても同様に shape の y 座標に対し マウスポインタの元々クリックした座標と y 座標と ずれてしまった y 座標 この差を足しこむことによって ずれが補正されます 確かめてみましょう 保存をして「ファイル」メニューから 「ブラウザでプレビュー」です キャンバスに置かれた シェイプのインスタンス 星形をクリックすると 回転します さて 端っこのほうをクリックしましょう そのクリックした座標を基準に 軸に回転します また少し別の所 クリックしますと ちゃんとそのクリックした座標を 軸に回転してますね クリックした座標で回転するためには インスタンスの基準点とクリックした座標 その差をもとめて埋める という処理が必要でした もう1度 図で確かめます クリックして基準点を中心に 回転した時 元々クリックされた ステージ上の座標とは別に その座標をインスタンスから見た座標に 置き換えて その座標がどこに動いたか ということを確かめます そしてこのインスタンスから見た座標を 改めてステージから見た座標に 置き換えて この差をとるわけですね そしてその差を埋め合わせてあげれば クリックした座標が中心に 回転する結果になります その考え方を JavaScript のコードに直すと まずマウスポインタのクリックした場所 x 座標 y 座標を調べます それをインスタンスに対する globalToLocal ステージから見た座標を インスタンスから見た座標に置き換える ということでマウスポインタを ステージからではなくて インスタンスから見た座表に置き換えます それがポイントとして Point オブジェクトとして変数に入ります そして回転した後 このインスタンスから見た座表の xy が やはり shape インスタンスを参照して インスタンスからステージの座表に global の座標に置き換えます それがこの Point オブジェクトです そうしたら元々クリックした ステージ上の座標と ずれてしまったインスタンスから見た座標を ステージに直した xy 座標ですね その差を埋め合わせてあげれば クリックした座標を元に 回転したことになる ということでした

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。