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