使用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 之后用 0 替换 x 和 y ）：

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

和

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