JavaScript (dessin SVG): Positionnement x nombre de points dans une zone

Question

J'utilise http://raphaeljs.com/ pour essayer de dessiner plusieurs petits cercles. Le problème que j'ai est que la toile a une largeur fixe, et si je veux dessiner, disons, 1000 cercles, ils ne s'enroulent pas sur une 'nouvelle ligne' (parce que vous devez spécifier la position xy de chaque cercle).

E.g. Je le veux:

......................................... .........

pour ressembler à ceci:

............................

......................

En ce moment je fais ceci:

for (var i = 0; i < 1000; i++) { 
     var multiplier = i*3; 
     if (i <= 50) { 
      paper.circle((2*multiplier),2,2); 
     } else if (i >= 51 && i <= 101) { 
      paper.circle((2*multiplier) - 304,8,2); 
     } else if (i >= 152 && i <= 202) { 
      paper.circle((2*multiplier) - 910,14,2); 
     } 
    } 

Pour référence: cercle (x co-ord, y co-ord, rayon)

Ceci est en désordre. Je dois ajouter une instruction if pour chaque nouvelle ligne que je veux. Doit être une meilleure façon de le faire ..?

Answer 1

Vous voulez modulo.

Je ne sais pas exactement ce que votre boîte englobante est, mais quelque chose comme:

var width = 300; 
for (var i = 0; i < 1000; i++) { 
    var multiplier = i*3; 
    var x = 2 * multiplier * i % width; 
    var y = 2 + 6 * (i + 50)/100; 
}