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)。因此出现了倾斜的网格。

你只需要这样写 vpaths(将 l 之后的 x 和 y 替换为 0 ):

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

和:

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