初めて学ぶCreateJS

クリック座標を基準点にして回したら位置合わせ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンスを任意の座標で回すふたつ目の考え方は、DisplayObject.regXとDisplayObject.regYプロパティで中心にしたい座標をインスタンスの基準点に定めることです。
講師:
10:03

字幕

キャンバス上に星形の シェイプが置かれています このシェイプをクリックしたら 回転させます 但しクリックした座標を軸に 回転するようにしたいと思います このための処理は幾つか 方法が考えられます CreateJS ではインスタンスの基準点を 動かすことが出来ます ここでは この基準点を動かす方法で クリックした座標を軸に インスタンスを回転してみます この JavaScript コードでは インスタンスの基準点を特に操作せずに 単純にクリックで回転しています このコードのクリックしてインスタンスを 回転する部分について ざっと確認しておきましょう まず初めに呼ばれる 初期化の関数では stage を作った後 createShape という関数を呼び出しています この関数は shape の xy 座標 これは星形の中心座標になります それと星形の塗り色を引数に渡しています これがその関数です この関数は shape を作り stage の子インスタンスに addChild メソッドで加えた後 引数に定められた座標に インスタンスの位置を定めています そして onClick イベントに rotate というイベントハンドラを定め draw というメソッドで星形を描いています 星形を描く部分は割愛します rotate という onClick ハンドラですね onClick イベントのハンドラでは イベントオブジェクトを受け取っていますが 今の所これは使っていません shape の rotation 回転角を 15 度加算しています そして描画を更新です まずは現在の動作を確かめておきましょう 「ファイル」メニューから 「ブラウザでプレビュー」します キャンバスに星形のシェイプが置かれました クリックするとシェイプは回転します 但し基準点は動かしていませんので どこを クリックしても中心を軸に回転しています これを基準点 中心にある基準点を クリックした座標に移したいと思います そのためのプロパティとメソッドを ご紹介します オブジェクトの基準点を変えるのは プロパティの regX と regY です reg というのはおそらく registration の略語でしょう 設定するのはオブジェクトの基準点から見た 変更をしたい x 座標と y 座標です 今回考えているのは クリックしたマウス座標に インスタンスの基準点を移したい ということですが クリックしたマウス座標は ステージから見た座標です ということはステージから見た座標を オブジェクトから見た座標に 変換する必要がでてきます ステージから見た座標をオブジェクトの 座標に変えるのは globalToLocal というメソッドです オブジェクトに対して このメソッドを呼び出します すると引数に渡した x 座標 y 座標 これがステージの座標として オブジェクトから見た座標に変換し point オブジェクトで返します 尚 逆の変換 つまりオブジェクトから 見た座標をステージの座標に変える― localToGlobal というメソッドもあります これは考え方が逆で オブジェクトから見た xy 座標を ステ―ジから見た座表に変換して point オブジェクトで返してくれます 合わせて覚えておくと良いでしょう onClick イベントのハンドラ rotate にインスタンスの基準点を 変更する処理を加えます まずはマウス座標を調べます mouseX これはイベントオブジェクトから 調べられます プロパティは stageX です y についても同様に コピーで済ませましょう X を Y に変更していきます では座標の変換です shape インスタンスから見た 座標に変換しますので global の座標を local インスタンスから見た座標ですね に変えます 変えたいのは mouseX と mouseY ですね それを変数に入れます mousePoint としておきましょう その後 基準点を変更します 基準点は regX regY でした インスタンスの regX を インスタンスから見た座標に変換した point オブジェクトの x に変えます 同様に 基準点 y 座標も インスタンスから見た クリックした座標ですね マウスポインタの座標に変えます 確認したいのですが 実はまだこれでは script が足りません 何が問題なのかということを 確認するため 回転の処理は一旦コメントアウト 無効にします そのうえで保存をして 「ファイル」メニューから 「ブラウザでプレビュー」してみましょう キャンバスに星形のシェイプが描かれました 回転は止めていますので クリックしても回転はしません 基準点が動くだけです さて基準点が動くとどうなるでしょうか 真ん中をクリックしても ちょっと動いた感じがしますが 端っこをクリックしてみましょう 何か大きな動きをしますね 回転はしないですから 動いてほしくないですが動いてしまいます これが問題点です 何故こういう風になったのかご説明しましょう 基準点を変えた時に オブジェクトの位置は動かしたくありません その前に何故オブジェクトが 動いてしまったのか確かめておきましょう このペンギンの図では インスタンスの基準点が左上角にあるとします そしてクリックした座標が この目の辺り ここにインスタンスの基準点を 左上角から移したとします そうすると基準点が移ります けれどもインスタンスの座標は 動いていません インスタンスの座標というのは 元々左上角にあります ですから新たに設定された クリックした座標が― インスタンスの座標に合う様に この例でいうと左上に動いてしまうんです これを防ぐにはどうしたらいいか というと インスタンスの基準点を変えるだけでなく インスタンスの座標も 動かせばいいわけですね つまりクリックした座標に インスタンスの基準点を移します そのままですと その基準点が インスタンスの座標に動いてしまいますから その前にインスタンスの座標も クリックした座標に動かす ということです JavaScript コードを仕上げます 関数 rotate で 回転を止めていましたけれど戻します 基準点を動かした後 インスタンスの座標自身も クリックしたマウス座標に 動かせばいいわけですね x 座標を マウス座標は変数にとってあります mouseX という変数です 同様に y 座標も コピーしてしまいましょう X を Y に変更します これで修正は終わりです 保存して「ファイル」メニューの 「ブラウザでプレビュー」してみましょう キャンバスに置かれた星形のシェイプ クリックすると回転します では端っこのほうをクリックしてみますと クリックした座標を中心に回転してますね ではもう1つ別の場所を 確かに問題なく 回転しているようです ここでご紹介したのは 基準点を動かすことによって 回転の軸を変える という方法でした JavaScript コードで 確かめておきましょう クリックしたマウスポインタの座標を調べ その座標を― インスタンスから見た座標 global から local に変換し それを変数にとっておきます そして そのインスタンスから見た座標 x 座標と y 座標に インスタンスの基準点を変更します 但しこれではインスタンスが インスタンスの座標に基準点を― 合わせてしまうというふうになって 動いてしまいます ですから回転した後 インスタンスの座標も クリックしたステージ上のマウス座標に 動かす必要がありました これでクリックした座標を中心に インスタンスが回転します

初めて学ぶCreateJS

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

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

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

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

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