2012年6月8日金曜日

JSXによるマウスでお絵描き

ようやくソースコードの整理が終わったので,恥ずかしながら公開します.マウスでお絵描きするサンプルプログラムです.ペンの色や太さを変更する機能や,保存機能など全く実装していません.あくまで,マウスの座標を取得したり,Canvasを使うサンプルとして御覧ください.

pen.html

pen.jsx

利用方法ですが,以下のようにJSXファイルをコンパイル(?)してください.

jsx --release --output pen.jsx.js pen.jsx

その後,pen.htmlとpen.jsxjsを同じディレクトリに置いてWebブラウザで開いてください.コンパイルされた後は.jsxファイルやweb.jsxは不要です.当方で試した際には「file://〜」の状態でも動作しました.

デモ

以下の四角の中でマウスをドラッグしてみてください.黒い点が描画されます.一部,四角の領域の位置調整の部分でコンパイルされたjsファイルに変更を加えています.どうしてもこの部分をJSXで記述することができませんでした.未熟です,はい.領域内の座標の取得方法を覚えたので,更新しました.(2012/6/21)

<注意!>Firefoxで動作しなくなっています.2012/6/21に加えた変更によるものです.具体的には,マウスの座標を取得するために,MouseEventのインスタンスのoffsetXとoffsetYプロパティにより値を取得していました.しかし,Firefoxにはこれらのプロパティが存在しないため動作しません.普段はGoogle Chromeを使って作業しているため,チェック漏れがあったことをお詫び申し上げます.(2012/6/29)

その後,FirefoxにはlayerXとlayerYプロパティがあることを調べました.ところが,web.jsにこれらのプロパティが存在しないことが分かり,あろうことかこれらを加えてgithubのJSXツリーにPull Requestを出しました.(若くないけど)若気の至りでした.layer[X,Y]はW3Cに承認されていないプロパティだったのです.

そのことを親切に教えてくださったFuji, Goroさんに感謝します.きっと,Pull Requestを見て「え?今さらこんなコト言ってくる人がいるぞ」という気持ちだったのではないでしょうか.冷静になってlayer[X,Y]が存在しない理由をきちんと考えていれば,こんな恥ずかしい思いはしなくても済んだのに・・・と思っていたら,即座にTwitter上で,マウス座標の取り方を解説しているページを授けていただきました.

そのページによると,やはりマウス座標の取得方法は混沌としているとのこと.これはものすごく役に立つと思って喜びながら日付を見ると,およそ3年前の記事.どれだけ遅れているんだ俺は.

気をとりなおして解説します.まず,マウスイベントからウィンド座標を取得します.これにはclient[X,Y]プロパティを使います.これだけではスクロールするとずれるので,ウィンドウ座標系内でのノードの座標をgetBoundingClientRect()メソッドによって取得し,引き算します.

具体的なマウス座標の取得方法は以下のとおりです.
var es = e as MouseEvent; // マウスイベントの取得
var ee = es.target as Element; // イベントの発生したノードの取得
var rect = ee.getBoundingClientRect(); // ノードのウィンドウ座標の取得
var x = es.clientX - rect.left; // マウスイベントのウィンドウ座標 - ノードのウィンドウ座標
var y = es.clientY - rect.top; // マウスイベントのウィンドウ座標 - ノードのウィンドウ座標
この記事が誰かの参考になることを祈ってます.

最後になりますが,こちらのページにはお世話になりました.ありがとうございました.

【閲覧注意】JSX で何か作ってみた。 | Big Sky

DOM level 3のマウスイベントにおけるカーソル位置の詳細 | 本の虫

追記

githubにソースコードを置いておきました(2012/6/14)

pen.html

pen.jsx

素のままのデモを実行したい場合はこちらをクリックしてください(2012/6/14)

マウスドラッグによる座標の取得方法を変更しました.(2012/6/21)

Firefoxでの不具合について記述しました.(2012/6/29)

マウスドラッグによる座標の取得方法を変更しました.(2012/6/30)

このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿