1

Web ページ上でマウスが移動する場所を (ピクセル単位で) 正確に記録しようとしています。次のコードがありますが、結果のデータにギャップがあります。

var mouse = new Array();
$("html").mousemove(function(e){
    mouse.push(e.pageX + "," + e.pageY);
});

しかし、記録されたデータを見ると、これは私が見ているものの例です。

76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels

これは、次のようになります。

76,2 //start x,y
77,3 //missing
78,4 //missing
78,5 //moved right two pixels, down three pixels
78,6 //missing
78,7 //missing
78,8 //moved down three pixels

ピクセルごとのマウス移動データを保存するより良い方法はありますか? 私の目標は Web ページには非現実的すぎますか?

4

3 に答える 3

3

その情報は、与えられた時点でしか保存できません。イベントはmousemove、ブラウザによって決定されるレートで発生し、通常は 60hz に達します。確かにポインターを 60 ピクセル/秒より速く移動できるため、何らかの補間を行わない限り、空白を埋めることはできません。

mousemoveマウスを画面の反対側に移動すると、1920 個のイベントが一度に発生するという手間 (およびパフォーマンスの低下) を想像してみてください。また、マウス自体が十分に速くポーリングするとは思いませんゲーミング マウスは 1000hz を超えません。

ここでライブ フレームレート テストを参照してください: http://jsbin.com/ucevar/

補間については、不足している点を見つけるために使用できるブレゼンハムのライン アルゴリズムを実装するこの質問を参照してください。これは難しい問題です。iPad 用のPenUltimate アプリは、線画を完全に自然で滑らかに見せる素晴らしい補間を実装していますが、Web 上には何もありません。

データの保存に関して[x,y]は、文字列の代わりに配列をプッシュするだけです。イベント ハンドラー関数が遅いと、イベントが取り残されると破棄されるため、リフレッシュ レートも遅くなります。

于 2011-10-13T04:47:57.867 に答える
2

マウスを動かすと、すべてのピクセルにマウスが存在するわけではありません。更新サイクル中、実際にはポイントからポイントへとスムーズにジャンプするため、実際には意のままにスキップするだけで、その間のすべてのポイントに到達しているように見えます。

マウス移動イベントが登録されたポイントを保存することをお勧めします。2 点間の間隔ごとに線が作成され、必要に応じて使用できます。

そして、処理効率に関する限り...

処理効率は、多くの要因に依存します。どのブラウザが使用されているか、コンピュータに搭載されているメモリの量、データ構造に対してコードがどの程度最適化されているかなど。

時期尚早に最適化するのではなく、プログラムを作成し、遅い部分をベンチマークして、ボトルネックがどこにあるかを見つけます。

  1. プロトタイプに一連の機能を備えたカスタムPointオブジェクトを作成し、それがどのように機能するかを確認するでしょう
  2. それがあまりにも行き詰まる場合は、オブジェクト リテラルをxand yset と共に使用することに切り替えます。
  3. それがうまくいかない場合は、2 つの配列を使用するように切り替えxますy。
  4. それが行き詰まるなら、私は何か新しいことを試してみます。
  5. 4に行く
于 2011-10-13T04:46:58.310 に答える
1

ピクセルごとのマウス移動データを保存するより良い方法はありますか?

「より良い」の基準は何ですか？

私の目標は Web ページには非現実的すぎますか?

カーソルが新しいピクセルに入るたびに新しいポイントを保存することが目標である場合は、そうです。また、ブラウザーのピクセルは必ずしも画面のピクセルに 1:1 でマッピングされるとは限らないことに注意してください。特に CRT モニターの場合は、ほぼ確実にマッピングされません。

于 2011-10-13T04:59:57.847 に答える