2017-09

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Canvas要素上でどこがクリックされたか正確に取得する方法

このエントリーをはてなブックマークに追加
3分くらいで読めます。

先のエントリで将棋の局面図を作るWebUIをアップデートしたと書きましたが、一番の問題はCanvas要素上でクリックされた座標を取得する方法がブラウザによって異なることでした。

ここでのポイントはページ内座標ではなくCanvas要素上でクリックされた座標の取得ということです。ページ内座標だとHTMLをいじくっているうちに座標がうまく取れない、なんてことが起こり得るのでCanvas上の座標でクリックされた場所を取得したいのです。

そのために、マウスクリック時のイベントオブジェクトではlayerXとlayerYというそのものずばりのプロパティがあるのですが、これだとFirefox6や64bit版ブラウザでうまく動作しないという問題がありました。

そこで検索した所、クリック時のページ内座標の取得についてはブラウザ別でも安定して取得する方法があるので、ページ内座標の取得→Canvasが配置されている座標のxy座標を引いて計算するという戦略でCanvas上の座標を取得するという方法が載っていました。Stack Overflowさまさまです。

以下はその引用です。

var x;
var y;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;


しかし、クロスブラウザ対応ってクロスプラットフォーム対応より大変なんじゃないかという気がしてきました。まず主要ブラウザだけで、Internet Explorer、Firefox、Google Chrome、Opera、Safariと5つあり、このうちInternet Explorerはバージョン違いを考慮する必要があります。またFirefoxも4.0で大幅にUIを変えたり、アドオンの対応状況が微妙だったりということもあってアップデートに慎重な人もいたりします。ただ、これらに64bit版というのが掛け算でかかってくると頭の痛いところです。スマートフォンやタブレットに搭載のブラウザで動くというのは大きな魅力ではあるのですが、解像度のことを考えると画面デザインの変更は必須ですし…

ネイティブアプリの64bit対応ならば、APIの有無とかそもそも書き方が間違っている(例えばポインタのサイズ計算が間違っている)ということで解決できるのですが、ブラウザの対応についてはその時々のブラウザの実装状況というものに大きく左右されるので一瞬しか有用な情報ではなくバッドノウハウの最たるものではないかと思います。HTML5になってウェブアプリがリッチになったとは言え、完成されたライブラリの充実を待たないと修羅の道に足を踏み込むことになりそうです。
関連記事
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://fantakeshi.blog50.fc2.com/tb.php/51-de4a4d8d
この記事にトラックバックする(FC2ブログユーザー)

«  | ホーム |  »

プロフィール

fantakeshi

Author:fantakeshi
Web:ここ
Twitter ID:fantakeshi
自作物やプログラムやまとまった技術的メモについて

RSSに追加

自作物

最新記事

Twitter

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

自作物 (26)
一般 (1)
将棋 (12)
BONANZA (1)
ponanza (1)
HTML5 (2)
Chrome (1)
WebAPI (1)
Webサイト (2)
プログラム (2)
Tips (1)

カウンター

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。