Qual è il modo corretto di disegnare linee rette usando raphael.js?

Question

Ho problemi disegnando una griglia semplice utilizzando Raphaël.js.

sto usando paper.path(), e tutto sembra bene con il mio stringhe di percorso:

ma in qualche modo questo viene resa:

ecco il codice che sto utilizzando per rendere questa "griglia"

// vertical lines 
    for(var x = (this._offset.x % cellSize); x < this.width; x += cellSize){ 
     var vpath = "M " + x + " 0 l " + x + " " + this.height + " z"; 
     var vline = paper.path(vpath); 
    } 
    // horizontal lines 
    for(var y = (this._offset.y % cellSize); y < this.height; y += cellSize){ 
     var hpath = "M 0 " + y + " l " + this.width + " " + y + " z"; 
     var hline = paper.path(hpath); 
    } 

(In questo caso cellsize = 50, e this._offset = {x: 0, y: 0})

Answer 1

Il problema è che si sta assumendo l prende una coordinata assoluta, ma ci vuole realtà relativa. Quando si scrive:

M 50 0 l 50 600 

Stai pensando significa scrivere una riga da (50,0) a (50, 600) ma significa in realtà inizio al numero (50, 0), spostare (50 , 600). Da qui la griglia obliqua.

È solo necessario scrivere i vpaths come questa (sostituendo x e y dopo la l con):

var vpath = "M " + x + " 0 l 0 " + this.height + " z"; 

e:

var hpath = "M 0 " + y + " l " + this.width + " 0 z";