使用raphael.js繪製直線的正確方法是什麼？

Question

我無法使用raphael.js繪製一個簡單的網格。

我使用paper.path（），一切看起來很好用我的路徑字符串：

但不知何故，這個被渲染：

這裏是我使用的代碼呈現此 「網格」

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

（在這種情況下CELLSIZE = 50，和this._offset = {X：0，Y：0}）

Answer 1

問題是，你假設l採取絕對座標，但它實際上需要一個相對的。當你寫：

M 50 0 l 50 600 

你以爲這意味着寫信（50,0）一行（50，600）但它實際上是指在（50,0），移動開始（50 ，600）。因此，偏斜的網格。

你只需要（與更換X和ÿ的升後）寫成這樣vpaths：

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

和：

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