使用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";