初めて学ぶCreateJS

インスタンス上でクリックした位置を保ったドラッグ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスボタンが押されたインスタンス上のポインタ位置は保ったままドラッグできるようにしましょう。そのためには、インスタンスから見たマウスボタンの押された座標を、覚えておかなければなりません。
講師:
09:58

字幕

インスタンスをドラッグする処理について 少し詳しく考えてみます 単純にスクリプトを書いた場合 真ん中辺りを ドラッグしている分には 問題無いのですが 端っこをドラッグすると ちょっと気になったりします このてっぺんの所 マウスボタンを押して ドラッグを始めますと 星の真ん中にポインタが来てしまいますね ではもうちょっと下の方を やはりマウスポインタの先端が 星の中心に来てしまいます これはインスタンスの基準点が 星の中心にあり ドラッグの処理がマウスポインタに インスタンスの座標 詳しく言うとインスタンスの 基準点を合わせる という処理にしてあるからです もし端っこをドラッグしたら 端っこがちゃんとキープされるように というふうにしたかったら その差を考えて スクリプトを書かなければなりません 現在の JavaScript のコードを マウス操作に関わる文を中心に 確認してみましょう まず初期設定の関数で shape のインスタンスを作る という関数が呼ばれます ここでは xy 座標と 星の塗り色が引数として渡されます そしてインスタンスを作って stage に子供として加えたら座標を指定し マウスに関する操作はここです インスタンスの onPress イベントに startDrag というハンドラを設定しました この関数は星を描く部分ですので 今は跳ばします では startDrag という ドラッグを開始するための処理を行っている 関数 ハンドラです イベントオブジェクトを受け取りますので そのイベントオブジェクトに対して マウスポインタが動いたらという onMouseMoveEvent そのハンドラを定めます この drag というハンドラは マウスポインタが動くと呼び出されます そしてやはりイベントオブジェクトを受け取り このイベントオブジェクトには マウスポインタの xy 座標が stageX stageY というプロパティで 渡されますので それをインスタンスの x 座標 y 座標に収めて そして stage の描画を更新している ということです そして常にマウスポインタが星の 真ん中になってしまう というのは この部分ですね x 座標 y 座標というのは これは基準点 現在 星形の真ん中になっています そこにマウスポインタの座標を 単純に放り込むから 常にマウスポインタが 真ん中になってしまいます どうしたら良いかというと 最初にクリックしたとき つまり onPress のハンドラですね ここで星のシェイプのどこがクリックされたか ということを確かめて その位置と星の真ん中 基準点との 差を覚えておくという必要があるわけです 現在の JavaScript コードのドラッグに 関わる部分を中心に確認しておきましょう まず初期化の関数で createShape という 星形の shape インスタンスを作る 関数が呼ばれます 引数は shape の xy 座標と 星の塗り色です その関数 createShape では shape インスタンスを作り stage に addChild メソッドで 子供のインスタンスとして加えます そして xy 座標を定めたら ここですね shape に onPress という イベントのハンドラを定めます draw は星形を描く部分ですので ここでは割愛します ではマウスボタンを押した時の startDrag というハンドラでは イベントオブジェクトを受け取ります そして そのイベントオブジェクトの onMouseMove に対して ハンドラを設定すると マウスポインタが 動いた時の処理が定められます そして関数 drag は やはりイベントオブジェクトを受け取ります このイベントオブジェクトは stageX stageY という マウスポインタの xy 座標を プロパティに持っています ですから shape インスタンスの xy 座標にそれらの マウスポインタの座標を定めれば マウスポインタのあとを shape インスタンスが追いかける ということになります そして毎回動くたびに 動画が更新しなければなりません そして問題になるのは shape のインスタンスの― xy 座標を定めている 2つのステートメントです マウスポインタの xy 座標を そのまま shape インスタンスの xy 座標 これは shape の基準点を決めます そこに放り込む 代入するから 結局マウスポインタの座標が shape インスタンスの 基準点とくっついてしまう 一致してしまうということになるわけです そうならないためには マウスボタンを押した時 つまりこの startDrag ですね ここでマウスボタンを押した時の― ポインタの位置と インスタンスの基準点との差を覚えておいて ドラッグした時に その差を補正してあげれば良いのです インスタンスのドラッグし始めた位置を 保ったままドラッグを続けるには このような考え方で 手を加えます まずインスタンス上でマウスボタンを押した時 onPress のハンドラ ここではイベントオブジェクトの onMouseMove に マウスポインタを動かした時の ハンドラを定めます それと同時に このような処理を加えます インスタンスの x 座標と あるいはインスタンスの y 座標と マウスの xy 座標の差をもとめます その差をそれぞれ 変数にとっておきます そして実際ドラッグした時のハンドラ イベントオブジェクトの stageX stgaeY で マウスポインタの xy 座標が わかるのですが それをそのままインスタンスの xy 座標に定めるのでなく そこに予め求めておいた x 座標と y 座標の差を 足しこんであげれば 元クリックしたドラッグし始めた位置を マウスポインタの位置をキープしたまま ドラッグすることができるようになります それではインスタンスをクリックした座標と インスタンス自身の基準点の差を 補正するためのスクリプトを加えます まず差を覚えておくための変数を宣言します よくオフセットという言い方をします xy それぞれについて変数を定めます そしてマウスボタンを押した時 そのイベントハンドラで 2つの値を覚えます まず x からですね インスタンスの... x 座標 引くことの onPress のイベントハンドラも イベントオブジェクトに マウスポインタの座標を 情報として持っています stageX ですね 同じ要領なので コピーしてしまって X と Y を書き換えます これでインスタンスの基準点と それからマウスポインタとの座標の差が もとまりました 後は実際にドラッグしている時のハンドラです ここにその差を足しこみます 間違えないように コピーをしましょう 同様に Y も足しこみます では保存してブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です キャンバスにおかれた shape インスタンスを ドラッグしてみます わざと端っこのほう このてっぺんをドラッグしますと 大丈夫ですね ちゃんとドラッグし始めた位置と インスタンスの位置が そのままキープされています 念のため下の方も ドラッグしてみますと インスタンスの基準点に マウスポインタの場所が合ってしまう― ということはないですね このようにイベントオブジェクトの 情報をうまく使い それからイベントハンドラで 役割を分担して処理をする ということも重要です JavaScript コードで 確認しておきましょう まずインスタンスを マウスボタンを押した時 onPress のハンドラで インスタンスの座標と それから マウスポインタの座標の差をとって それを変数として とってあります この値をキープしたまま ドラッグし始めた時 ドラッグしている時に イベントオブジェクトからとった マウスポインタの xy 座標を そのまま放り込むのではなく この変数にとっておいた 差を足しこんで 差を補正してインスタンスに 座標として与えてあげれば 初めにクリックした位置が ずれずにキープできるというわけです

初めて学ぶCreateJS

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

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

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

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

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