初めて学ぶCreateJS

インスタンスのドラッグ&ドロップ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンスをドラッグ&ドロップします。マウスボタンを押したときドラッグを始め、プレスしたまま動かしたらインスタンスをポインタに追随させます。そして、マウスボタンを放したら、ドラッグが終わります。
講師:
08:23

字幕

インスタンスをマウスで ドラッグ&ドロップできるようにしてみます そのためにはマウスのイベントを 組み合わせて使うことになります この JavaScript コードは 星形をただ置いてあるだけで マウス操作に関するスクリプトは 書いてありません 流れをざっと確認します まず初期設定の関数 initialize が呼ばれると canvas 要素に対して stage が作られ createShape という shape インスタンスを作る関数が呼ばれます これは shape の xy 座標と 星形を描きますが その塗りのカラーが 引数として渡されます これがその createShape の関数です xy 座標と color を貰うと shape インスタンスを作り stage に addChild メソッドで shape インスタンスを表示リストに加えます それから引数の xy 座標に位置を合わせ 次は draw という関数に移ります これは shape インスタンスに 星形を描く関数です ですから shape インスタンスの graphics プロパティ つまり graphics オブジェクトを渡し そして引数に貰った color を そのまま また関数 draw に渡します draw は受け取った graphics オブジェクトに対して 線と塗りを指定し この塗りの時に引数の color を使います そして drawPolyStar メソッドで 星形を描き描画を更新するという流れです ドラッグ & ドロップを行うには マウスに関するイベントを 組み合わせることになります ですから その手順を まず最初に確認しておきましょう オブジェクトをドラッグするには このような 3 つの手順が必要です まず最初 ドラッグの開始です これはオブジェクトに onPress イベントを設定します onPress というのは マウスボタンを押した時です 押した瞬間にドラッグを開始します ですから そのドラッグを開始するための ハンドラを設定して ドラッグの開始の処理を行います そしてこの開始のハンドラというのが こちらです イベントオブジェクトが受け取られます そうしたらマウスを動かしたら インスタンスをマウスの後 ついていけ という処理を行わなければいけません そのためにマウスが動いたら というイベントにハンドラを定めます 注意して欲しいのは このハンドラは 引数に受け取った イベントオブジェクトに設定します イベントオブジェクトに onMouseMove という イベントのハンドラを設定します そして この onMouseMove に設定したドラッグのハンドラ これがまさにドラッグの処理 つまりインスタンスを マウスポインタの座標に合わせて追いかける というふうな処理になります マウス座標をどうやって調べるのか というのは後でご説明します 星形のシェイプをドラッグするための 3つの手順の処理を書き加えます まずはマウスボタンを押した時ですね shape インスタンスに対して onPress です そしてドラッグ開始 そのハンドラは startDrag という名前にしました そうしたら startDrag という function を定めます startDrag そして startDrag はイベントオブジェクトを 引数として受け取ります 手順の2番目です このイベントオブジェクトに マウスを動かしたら onMouseMove ですね マウスの追いかけるという 関数を定めます これは drag という名前にします ではこのハンドラをまた 定めます これもイベントオブジェクトを受け取るので とりあえず受け取っておきます そうしたら この中で インスタンスの座標とマウスポインタの座標を 一致させるという処理を加えれば良いでしょう ただ マウスポインタの座標 どう調べたら良いか という点が残っています それをご説明しましょう onMouseMove イベントのハンドラで どのようにマウスポインタの 座標を取得するか ということです それは onMouseMove イベント のハンドラというのは イベントオブジェクトを受け取ります 実はそのイベントオブジェクトには stageX stageY というプロパティがあり これは stage から見た マウスポインタの座標なんです ということは これらの2つの座標を オブジェクトの xy 座標に設定すれば オブジェクトはマウスポインタの後を追って ドラッグしてるように見える ということになります ただ1つ誤解して欲しくないのは どんなイベントオブジェクトでも みんな stageX stageY を 持っているというわけではありません イベントオブジェクトが持つ情報は そのイベントによって異なります onMouseEvent のハンドラは そのイベントオブジェクトから マウスポインタの座標 stageX stageY がとれるということです onMouseMove の イベントのハンドラ 関数 drag を完成させましょう インスタンスの座標 まず x から行きます x 座標をイベントオブジェクトから 取り出す stageX ですね という座標に合わせます これはもうコピーしてしまいましょう コピーをして座標を y に変更します そしてドラッグしている最中 画面を常に更新しないと アニメーションになりませんので 忘れていけない stage への update ですね 保存したらブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します キャンバスに置かれた 星形のインスタンス ドラッグできるかどうか 試してみましょう マウスボタンを押して動かします ドラッグできますね 放すとその位置にとどまります ドラッグとドロップができるようになりました 今回はマウスイベントの onPress と それから onMouseMove という イベントハンドラ それからイベントオブジェクトから 情報を得て マウスポインタの後を追いかける という処理を行いました コードでも確かめておきましょう まず onPress は キャンバスに置かれた shape インスタンスに対して 設定します その shape インスタンスが クリックというか マウスボタンが押されたらですね ハンドラを定めました そして そのハンドラが受け取った イベントオブジェクトに対して マウスポインタが動いたら onMouseMove というイベントを定めて そこにハンドラを指定します そしてこのマウスポインタが動いたらという ハンドラでインスタンスの xy 座標を マウスポインタに合わせるわけですが その時イベントオブジェクトから マウスポインタの xy 座標を調べる プロパティは stageX と stageY ということでした

初めて学ぶCreateJS

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

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

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

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

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