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在每次繪製一條線後延遲標誌爲真。

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; 
}