JS svgペインティング。描画頻度を下げる方法（mousemoveイベント）？

Question

私は単純なSVG描画アプリケーションを書いています。今は線描画を最適化しようとしています。生の変種はすべてのmousemoveイベントで 'lineTo'を描画します。それは、見栄えの悪いシャープネスを作り出します

グローバル変数testIntを使用して、lineToのアクション間の遅延をシミュレートすると、本当に素晴らしい滑らかな線が得られますが、悪い習慣のようです。誰よりも良い解決策を提案できますか？ （私はそれが基本的に既存の<パス>要素を修正言ったように）

は、ここに私のdrawLine関数のコードです：

drawLine: function(id, X, Y){ 
    var path = document.getElementById(id); 
    if(path.getAttribute('d')) 
    { 
     testInt++; 
     if(testInt>=6) 
     { 
      PathHelper.addLineTo(path, X, Y); 
      testInt = 0; 
     } 
    } 
    else 
    { 
     PathHelper.moveTo(path, X, Y); 
    } 
} 

PathHelperは右の文字列を生成し、すでに作成したパスに挿入しています。

Answer 1

ここでは、各行の描画の間に遅延を導入するソリューションがあります。 canDrawLineフラグがクロージャーに存在するので、グローバル変数は使用されません。私はsetTimeoutを使用して、行が描画されるたびに遅延の後にフラグをtrueに切り替えます。

drawLine: drawLineFactory(); 

function drawLineFactory() { 

    var canDrawLine = true; 

    //Decrease to draw lines more often; increase to draw lines less often 
    var TIME_BETWEEN_LINES_MS = 100; 

    function drawLine(id, X, Y) { 

    //If a line was recently drawn, we won't do anything 
    if (canDrawLine) { 
     var path = document.getElementById(id); 
     if (path.getAttribute('d')) { 
     PathHelper.addLineTo(path, X, Y); 

     //We won't be able to draw another line until the delay has passed 
     canDrawLine = false; 
     setTimeout(function() { 
      canDrawLine = true; 
     }, TIME_BETWEEN_LINES_MS); 

     } else { 
     PathHelper.moveTo(path, X, Y); 
     } 
    } 
    } 

    return drawLine; 
}