JS svg peinture. Comment réduire la fréquence de dessin des lignes (événement mousemove)?

Question

J'écris une application de dessin SVG simple, maintenant j'essaie d'optimiser le dessin au trait. La variante brute consiste à dessiner chaque 'lineTo' sur chaque événement mousemove. Cela crée une mauvaise netteté. Im utilisant la variable globale testInt pour simuler le retard entre les actions de lineTo, il donne vraiment une belle ligne lisse, mais cela semble être une mauvaise pratique. Quelqu'un pourrait-il suggérer une meilleure solution?

Voici mon code de fonction DrawLine (comme je l'ai dit modifie fondamentalement chemin> élément < existant):

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 est ne génère que la chaîne droite et il insère dans le chemin déjà créé.

Answer 1

Voici une solution qui introduira un délai entre le dessin de chaque ligne. Notez que le drapeau canDrawLine existe dans une fermeture, donc aucune variable globale n'est utilisée. J'utilise setTimeout pour basculer le drapeau à true après un délai chaque fois qu'une ligne est dessinée.

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