javascript - ルックアップ テーブルとしての 2 次元配列の使用とクリックの計算

Question

幅 1000、高さ 600 のキャンバスがあります。このキャンバス内には、それぞれ独自の ID を持つ 300 ～ 500 の四角形のタイルがあります。キャンバス内でマウス座標を検出できますが、ルックアップ テーブルとして 1000 x 600 の 2D 配列を使用するか、アルゴリズムを実行して、座標がタイル内にあるかどうかを確認する必要があります。これはJavaScriptなので、すべてブラウザ内にあります。1000 x 600 の 2D 配列はブラウザが処理するには多すぎますか? 実装に関しては、ルックアップ テーブルの方がはるかに簡単なソリューションです (そしておそらくより高速です) が、スペースのトレードオフが大きすぎますか?

Answer 1

それはおそらく数字に依存するでしょう。

クリック数が多く、ターゲットの位置が変わらない場合は、提案しているようにマッピングを事前に計算する方が効率的かもしれません。

ただし、初期マッピングを生成するコストは比較的高く、表示が変更された場合は、そのコストが再び発生します（これを軽減する方法があると考えられます）。私の推測では、ターゲットをループしてクリックごとに計算を行う方がおそらく速いでしょう。長方形だけの場合、計算はそれほど複雑で集中的ではないはずだからです。

私は、あなたが実装するのに最も簡単なものを使用すると思います。パフォーマンスが十分でない場合（または、試してみたい場合）は、別の方法を試して比較してください。