2010年9月12日日曜日

HTML5 canvas上のイベントの位置を取得する

イベントの位置を

 var x = event.clientX ;
 var y = event.clientY ;

でとると、ウインドウのドキュメントを表示している部分の
左上が原点になるので、スクロールするとずれてしまいます。
それに、canvas の左上からの相対座標になりません。
なので、

 canvasOffsetX = canvas.offsetLeft;
 canvasOffsetY = canvas.offsetTop;
 var x = event.clientX - canvasOffsetX;
 var y = event.clientY - canvasOffsetY;

としたのですが、これだと一番上までスクロールしている
状態ならOKですが、下にスクロールするとずれてしまいます。
それで、次に

 canvasOffsetX = canvas.offsetLeft;
 canvasOffsetY = canvas.offsetTop;
 var x = event.pageX - canvasOffsetX;
 var y = event.pageY - canvasOffsetY;

とすると、スクロールしてもOKになりました。
ただし、pageX/pageYはW3C規格では定義されていないし、IEではサポートされていないそうです。
(IE以外の主要なブラウザすべてでサポートされているらしい)

で、"本の虫: DOM level 3のマウスイベントにおけるカーソル位置の詳細"
を参考にさせていただいて、こうなりました。ありがとうございます。

 var rect = event.target.getBoundingClientRect() ;
 var x = event.clientX - rect.left;
 var y = event.clientY - rect.top;


 

0 件のコメント:

コメントを投稿