JS Svg Malerei. Wie verringere ich die Zeichnungsfrequenz der Linien (Mausbewegung)?

Question

Ich schreibe eine einfache SVG Zeichnung App, jetzt versuche ich, Strichzeichnung zu optimieren. Die rohe Variante ist jedes "lineTo" bei jedem mouse move Event zu zeichnen. Es erzeugt schlecht aussehende Schärfe.

Im verwenden globale Variable testInt zu simulieren Verzögerung zwischen lineTo Aktionen, es gibt wirklich schöne glatte Linie, aber scheint wie schlechte Praxis. Kann jemand eine bessere Lösung vorschlagen?

Hier ist meine drawLine Funktionscode (wie ich sagte, es ist im Grunde < Weg modifiziert bestehende> -Element):

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 ist erzeugt nur die richtige Zeichenfolge und fügt sie in bereits erstellten Pfad.

Answer 1

Hier ist eine Lösung, die eine Verzögerung zwischen dem Zeichnen jeder Zeile einführt. Beachten Sie, dass das canDrawLine-Flag in einem Abschluss vorhanden ist, also keine globalen Variablen verwendet werden. Ich benutze setTimeout, um das Flag nach jeder Verzögerung, wenn eine Linie gezeichnet wird, auf true umzuschalten.

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