CreateJS実践講座

ドラッグするオブジェクトとマウスポインタの位置を調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ドラッグし始めたときのオブジェクトとマウスポインタの座標の差を調整して、インスタンスを動かします。
講師:
04:08

字幕

このレッスンでは drag and dropの処理における マウスポインターとオブジェクトとの 位置調整についてご説明します これはまだ位置調整をしていない場合です ドラッグをします そしてマウスボタンを離します 特に問題はないように見えますね けれどこの端っこの所 マウスボタンを押しました そして動かすといきなりインスタンスの真ん中に マウスポインタが来てしまいます というのはこのインスタンスの基準点 原点というのは真ん中になっています マウスポインタを動かしたときに そのマウスポインタの位置と インスタンスの基準点が一致するように 設定してあるから こうなってしまうんですね それを普通はどうなってるのが 自然かといいますと もう1つ作ってあります こちらは端っこをドラッグしても ドラッグし始めた位置が動きません 真ん中にずれてくることがないんですね この位置調整についてご説明します このDreamweaverで開いたhtmlドキュメントは まだ位置調整がしていない場合の スクリプトが書いてあります では位置調整をするための変数を設けましょう offsetとします そしてXY座標両方とも収めたいので こちらはpointobjectで作ることにしましょう createjs.Point このPointというのは X座標Y座標をプロパティとして持ちます ではずれをどこで判断するか 調べるかというと インスタンスをクリックしたときですね マウスダウンのイベントリスナー スタートドラッグです この中で今の変数に ずれを収めることにしましょう offsetのX これがインスタンスの座標 インスタンスはmyshapeとなっていますので これの まずはX座標ですね コピーをしてX座標と それからイベントオブジェクトから調べた マウスポインターのX座標 こちら同じ名前になっていますので コピーを使ってしまいます コピーをここに持ってきます これでX座標のほうのずれがわかります offsetという変数に入りました これはYについても同じことを書きますので コピーをして使ってしまいましょう コピーをして そしてペーストです XをYに書き換えます これでインスタンスと マウスポインターの座標のずれが offsetという変数に入りました それをどこで使うかというと このドラッグをしているときですね ドラッグをしているときの処理 マウスボタンを押したまま動かしたら このドラッグというリスナー関数を 実行するわけですが ここは単純に マウスポインターの座標になっています ここに対して今覚えておいたoffsetですね X座標それからY座標も同様に ずれを加えて維持することにします では保存して確認してみましょう ブラウザでプレビューします マウスボタンをこの端っこの所で押しました 動かすとちゃんと位置がキープされます このようにしてインスタンスと マウスポインタの座標のずれを 保持したまま動かす drag and dropを完成させることができました このレッスンではdrag and dropをする時 マウスポインタとインスタンスの位置のずれ それを保持したまま動かす という方法についてご紹介しました そのずれを保持する変数は ポイントインスタンスで XY座標を持つオブジェクトで作りました そしてマウスボタンを押したとき ドラッグがスタートするリスナー関数の中で そのずれをマウスポインタとインスタンスの XY座標のずれをoffsetという変数にいれ 実際に動かすとき ドラッグをするときですね このリスナー関数のなかで マウスポインターのXY座標に そのずれを補正することで 位置をキープすることができたということです

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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