今日のJavaScript | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2014.2.6

今日のJavaScript

お久しぶりです。
good sunこと山口です。

今回も恒例のjavascriptシリーズですが、
前回紹介したシステム等を利用しまして、
ついに画面を自由に回すことが出来る様になりました。
3Dの表示エリアをドラッグしてみて下さい

因みに今回のサンプルはこちらです。
※サンプルはGoogleChromeでのみ動作致します

ついに一時停止に対応しました。

今回はマウスのドラッグの取得についての説明をしたいと思います。
(※この説明もGoogleChromeに限定させて頂きます)

HTMLのDocumentルートの以下のメンバにfunc(event)な関数を登録すると、
それぞれマウスが押された時や動いたとき等を取得できるようになります。
document.onmousedown;
document.onmousemove;
document.onmouseup;

これだけではどこからのマウスイベントなのかを取得するのが難しいのでもう一工夫します。
document.createElement(“td”)で生成したエレメントにも
onmousedown等のメンバがありますので、
イベント処理を開始したいエレメントのonmousedownを取得して、
そこでdocumentのマウスイベントの監視を開始する様に変更すると、
取得開始のエレメント外でもマウスイベントが処理できるようになります。
(この辺に興味のある方はサンプルの48～108行付近と134行目付近で行っていますのでご確認下さい。)

さらに、今回のシステムではもう一工夫が必要になっている箇所があります。
今回デモウィンドウ内をドラッグすると3D画面を回転できるようになっていますが、
実はこのウィンドウの描画領域はiframeを使用して作っている為、
先述のdocument.～がそのままでは使えないです。
この場合はiframeエレメントのメンバ.contentDocumentが
documentの代わりになりますので、こちらにも同様のマウスイベントを登録してしまう事で、
iframe内のマウスイベントを取得する事が出来る様になります。
(この辺も興味のある方はサンプルの190行目付近で行っていますのでご確認下さい。)

と一工夫を入れるとあっという間に、ブラウザがツールみたいになります。

少し捻ると直ぐに実現可能なJavaScriptは楽しいですね。
思うようにどんどん実装できると、
次は何をしようかと意欲が湧くきっかけになります

皆さんも是非JavaScriptを好きになってください
さて次回は何をしようかな?
ではまた次回