1

マウスを動かすたびにすべてのキャンバス要素をループすることを提案するこの質問があることを私は知っています。

しかし、すべての要素をループするよりも効果的な方法はありますか?

キャンバスにはかなりの数の要素があり、マウスを動かすたびにそれらすべてをループすると、非常に遅くなる可能性があります。

4

2 に答える 2

2

はい、すべての要素をループする必要があります。

これが、ほぼすべてのヒット テスト/オブジェクト ピッキングのしくみです。

実際の境界をテストする前に、マウス座標がオブジェクトの長方形の境界内にあることを確認するなど、実行できる多くの最適化があります (オブジェクトがすべて長方形である場合を除きます。これにより、すべてが便利で高速になります。 10,000 個のオブジェクトがあります)。100 万個のオブジェクトがある場合は、それらの場所を 4 分割するか、別の方法で分離レイヤーを追加することもできます。

しかし、一日の終わりには、関連するすべてのオブジェクトをループして、その境界がマウス ポイントと交差するかどうかを確認する必要があります。それを回避する方法はありません。高速であるべきです。非常に遅いものを実装した場合は、それを投稿してください。私たちが見て、指針を与えることができます。

実際の例を見る必要がある場合は、このような状況を正確に説明するために、キャンバス内で形状を選択して移動する簡単なチュートリアルを作成しました。

于 2012-10-09T15:45:14.650 に答える
0

10000 個の要素をループすることは、JavaScript ではまだ簡単です。

ただし、すべてのマウス移動ではなく、ある程度の間隔でそれらをループすることを検討する場合があります。

var mouseX, mouseY;

$(document).on("mousemove", function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;

  /* dont do any probing there */

});

setInterval(function() {
  checkCollision();
}, 25);
于 2012-10-10T01:00:35.080 に答える