初めて学ぶCreateJS

インスタンスをドラッグしながら回す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウス操作を扱う練習として、インスタンスをドラッグしながら回してみましょう。もちろん、回転の軸は、マウスボタンを押したインスタンス上の座標とします。
講師:
08:50

字幕

キャンバスに置かれた星形のシェイプを ドラッグで回転してみます 但しその回転の軸は マウスポインタを合わせて ドラッグし始めた位置を 回転の軸とします ドラッグする位置を変えれば また回転の中心も変わってきます 回転の軸つまり 基準点を変更することによって この操作を可能にしています この javaScript コードは クリックでインスタンスを回転しています そしてその回転の軸は クリックした座標です まだドラッグの操作は加えていません クリックで回転する場合 考え方はやはり同じで クリックした座標にインスタンスの 基準点を移します その時のプロパティが regX regY 基準点の変更です 右辺 代入する座標で このインスタンスの基準点を変更します その際の考え方の流れを 図でご説明しましょう インスタンスをクリックした座標で 回転するには 3 つのステップで考えます まずインスタンスの基準点が 左上隅にあるとします そしてこのペンギンの目の辺りを クリックしたとしましょう ここで回転したいと思った場合に ここに基準点を設定します インスタンスの基準点を regX regY でずらすわけですね 但しそうした瞬間 このインスタンスの基準点が 新たに基準になりますので 原点になりますので この座標が元々のインスタンスの 基準点があった左上隅に 動いてしまうんですね この2つ目の図です 動いてしまってはまずいので インスタンスの座標も 元々クリックした場所に移します これが3つ目です そうするとインスタンスの基準点がずれて インスタンスの座標そのものも変わるので インスタンスは動かずに 基準点が変わるということになります 具体的な JavaScript のコードで 確認します onClick イベントのハンドラ rotate ここで回転の処理をしています まずはクリックされたマウスポインタの座標 eventObject から stageX stageY で得られますので それを変数にとっておきます インスタンスの基準点を変えるには この座標をインスタンスから見た座標に 変えなければいけません ですので この xy 座標 マウスポインタの座標を インスタンスから見て globalToLocal メソッドで インスタンスから見た座標の point オブジェクトに変換しています そして基準点の変更です regX regY 基準点を変えるプロパティです インスタンスから見たマウスポインタの座標に x 座標 y 座標の値をとりましたので それを基準点のプロパティに 代入します そして回転をして インスタンスの基準点をずらしただけで インスタンスの座標をずらしていませんので 改めてインスタンスの座標を 元々マウスがクリックした マウスポインタでクリックした座標 ステージから見た座標に直して これで回転の軸が クリックした座標になり そのまま回転の軸が移動することが ないわけですね ではこのコードの動作を 確認しておきましょう 「ファイル」メニューから 「ブラウザでプレビュー」します キャンバスに星形のシェイプが 表示されましたので ドラッグではなくてクリックですね クリックで回転します 例えばこの端っこの所をクリックすると このクリックした座標を基準に 中心として回ります もう1つ別の場所をクリックしてみましょう 基準点をこの位置にずらすことによって回転の 軸を自由に設定することができるわけですね それではこの JavaScript コードを クリックでなくドラッグで インスタンスが回転するように 変えてみましょう ドラッグは 2 つのステップが必要です まずマウスボタンを押したら ドラッグを開始する処理です 押したらというのは Press ですね ドラッグを開始する処理は また別に定めますので startRotation としましょう その関数を ハンドラを ここに定めます eventObject が必要ですので ここからコピーして流用してしまいましょう さてステップの2つ目というのは マウスを動かしたら rotate 回転の処理をするということですね onMouseMove という イベントを使います このイベントは eventObject に対して設定します onMouseMove と そして回転の処理を行う というイベントハンドラですね 設定をします あと回転角 15 度はちょっと大きいので 小さめにします 元々 onClick のハンドラで行っていた操作を onPress のハンドラと それから onMouseMove のハンドラ 役割分担をします どういうふうにするかというと まず onPress をした瞬間 基準点をずらします ですから前半ですね 元々 onClick でやっていた 前半の処理をそっくり startRotation onPress の ハンドラのほうに移します そしてマウスを動かしたら 回転しましょうということなのですが mouseX mouseY がこの rotate の 関数から startRotation onPress のハンドラの方に 移ってしまいました しかもこれ ローカル変数ですから こちらからは参照できません どうするかというと この mouseX mouseY の 変数をとるステートメントを コピーします コピーしてしまってよいのか というとマウスをどんどん動かしたら その動かしたマウスの座標に インスタンスの座標を合わせるわけですから これでいいわけです 動作を確かめてみましょう 保存したら「ファイル」メニューから 「ブラウザでプレビュー」します 星形のシェイプがキャンバスにありますので ドラッグをしてみます まずは真ん中辺り ドラッグで回転します じゃあ今度は端っこの てっぺんのほうをドラッグしてみましょう 確かにドラッグし始めた座標が 常にキープされてインスタンスの 回転の軸になっていますね JavaScript のコードを おさらいしましょう まずマウスを押した瞬間 ボタンを押した瞬間に ドラッグの処理がスタートします startRotation というハンドラを定めました 次にマウスを動かしたら 回転をさせるという onMouseMove イベントの ハンドラを定めています このイベントは eventObject に対して設定する ということを忘れないようにして下さい そして今 基準点をずらす という処理が入りますので マウスのクリックした座標 stageX stageY でとったら それを変数に収め そのステージから見た マウスポインタの座標を インスタンスから見た座標に globalToLocal メソッドで変換します そしてその変換した座標を インスタンスの基準点として 新たに定めます そしてマウスを動かしている間 実行する rotate というハンドラですが そこで改めて今 マウスポインタがどこにあるのかという ステージ上の座標を調べ 回転した後 インスタンスの座標を マウスの座標に合わせる そして描画の更新 これでドラッグする時に インスタンスが回転し しかもその回転の軸が ドラッグし始めたポイントをキープしたまま 動くという動作になります

初めて学ぶCreateJS

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

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

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

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

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