マウスムーブイベントを高速化する方法はありますか?

StackOverflow https://stackoverflow.com/questions/5329661

  •  26-10-2019
  •  | 
  •  

質問

この Web サイト用に小さな描画スクリプト (キャンバス) を書きました。 http://scri.ch/

ドキュメントをクリックすると、すべての mousemove イベントは基本的に以下を実行します。
- 座標を取得します。
- context.lineTo() この点と前の点の間
- context.stroke() この線

ご覧のとおり、カーソルを非常に速く動かすと、イベントが十分にトリガーされず (CPU / ブラウザーなどによって異なります)、直線がトレースされます。

疑似コードでは:

window.addEventListener('mousemove', function(e){
  myContext.lineTo(e.pageX, e.pageY);
  myContext.stroke();
}, false);

これは既知の問題であり、解決策は問題ありませんが、それを最適化したいと考えています。

だから代わりに stroke() Mousemove イベントがトリガーされるたびに、新しい座標を配列キュー内に置き、タイマーを使用して定期的に描画または空にします。

疑似コードでは:

var coordsQueue = [];

window.addEventListener('mousemove', function(e){
  coordsQueue.push([e.pageX, e.pageY]);
}, false);

function drawLoop(){
  window.setTimeout(function(){
    var coords;
    while (coords = coordsQueue.shift()) {
      myContext.lineTo(coords[0], coords[1]);
    }
    myContext.stroke();
    drawLoop();
  }, 1000); // For testing purposes
}

しかし、ラインは改善されませんでした。そこで点だけを描いてみました mousemove. 。同じ結果:点間のスペースが大きすぎます。

最初のコード ブロックは十分に効率的であることに気づきました。 mousemove イベントのトリガーが遅すぎます。

したがって、無駄な最適化を実装するために時間を費やした後は、次はあなたの番です。を最適化する方法はありますか mousemove DOM スクリプトのトリガー速度は?

いつでもマウスの位置を「リクエスト」することはできますか?

アドバイスありがとうございます！

役に立ちましたか？

解決

レポートの頻度を増やしたい場合は、残念ながらうまくいきません。マウスは自分の位置をオペレーティング システムにのみ報告します n 1秒あたりの回数 n 通常は 100 未満です。(実際の仕様でこれを確認できる人がいたら、遠慮なく追加してください。)

したがって、滑らかな線を得るには、ある種の補間スキームを考え出す必要があります。このテーマに関する文献はたくさんあります。お勧めします モノトーンキュービック補間 なぜなら、ローカルで実装が簡単で、非常に安定している (オーバーシュートがない) からです。

次に、スプ​​ラインを計算したら、滑らかに見えるように十分に短い線分でスプラインを近似することも、徹底的に独自のスプラインを作成することもできます。 ブレゼンハム それを描画するアルゴリズム。

単純な描画アプリケーションにこれだけの価値があるとしたら...もちろんそれはあなたが決めることです。

他のヒント

クールなサイト、残念ながら、マウスの現在の位置をJavaScriptでリクエストする方法はありません。あなたが持っている唯一のフックは、すでに使用しているイベントです。あなたがもっと制御する必要がある場合は、フレームレートを変更してマウスの位置を要求できるフラッシュの使用を検討します。

trace("Mouse X: " + _xmouse);
trace("Mouse Y: " + _ymouse);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top