2

このダミーの質問で申し訳ありません！:D

私は html5 キャンバス要素でクリック可能なマップを作成しようとしています。この良い例を見つけます: http://www.rubydesigner.com/blog/click-map-using-html5-canvas

ただし、Chrome からダウンロード (CTRL+S) すると機能しません。JS画像を含むhtmlページとファイルフォルダーをダウンロードし、画像へのパスを確認しましたが、それでもマップは表示されません。何が問題ですか？

4

1 に答える 1

-1

アップデート

CORS に関する最初の想定は、ここでは当てはまらないことが判明しました。

コードは Chrome で動作するように見えましたが、ファイルをダウンロードしてキャンバスをローカル (file://) ファイル参照で使用する場合、通常は CORS が原因です。ここでは localhost が XAMMP 経由で使用されているため、これが原因ではなく、オンライン コードに複数のバグがあることが判明しました。

具体的には、マウスの座標を計算する方法:

var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);

これにより、もちろんどのインデックスにも使用できないNaN値が得られます。offsetX/Y

より適切な方法は次のようなもので、ここでもキャンバス オフセットを補正します。

var rect = map_wrapper.getBoundingClientRect();
var datapos = ((e.clientY - (rect.top |0)) * 300 * 4) +
              ((e.clientX - (rect.left|0)) * 4);

ただし、ここではそうであると思われる要素の浮動小数点位置に出くわしたことはありません (rect.top はブラウザーで float 値を表示します。これも少し驚きです)。そのため、ここで値を整数に強制しています (通常は必ずしもそうとは限りません) ..これについては深く掘り下げませんでした）。コード全体のデバッグはここでは少し範囲外なので、他のバグを見つけるためにそれを残してOPに任せます。

位置を修正すると、少なくともピクセル配列に使用可能なインデックスが与えられ、有効な値が返されます（必ずしも正しいとは限りません。ガンマ/色補正が適用されている場合は、画像のチェック、許容値が残ります....）。赤いコンポーネントの場合 (テスト時にまだ問題がありますが、前述のように、完全なデバッグと修正を行うのは少し範囲外です)。

うまくいけば、これで他のエラーがどこにあるかがわかります。私はhtmlなどを通過しませんでした。

于 2013-07-14T15:21:22.160 に答える