16

このウェブサイト用に小さな描画スクリプト (キャンバス) を書きました: 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 スクリプトでトリガー速度を最適化する方法はありますか?

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

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

4

2 に答える 2

21

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

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

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

単純な描画アプリケーションにとってこれだけの価値があるかどうかは、もちろんあなた次第です。

于 2011-03-16T18:25:24.453 に答える
0

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

trace("Mouse X: " + _xmouse);
trace("Mouse Y: " + _ymouse);
于 2011-04-02T00:28:27.863 に答える