javascript - 使用 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)。因此，倾斜的网格。

您只需要像这样编写 vpath（将l后的x和y替换为0）：

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

和：

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