MeSH日記: 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のマウスイベントにおけるカーソル位置の詳細 | 本の虫