raphael.js中绘制直线的正确方法是什么？

Question

raphael.js中绘制直线的正确方法是什么？

javascriptcanvasgriddrawingraphael

6

我在使用raphael.js绘制一个简单的网格时遇到了问题。

我在使用paper.path()，我的路径字符串看起来都很好：
enter image description here

但是这样就被渲染出来了：
enter image description here

下面是我用来渲染这个“网格”的代码：

    // 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}）

- Louis Boux

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- McGarnagle · Accepted Answer

问题在于您假定l采用的是绝对坐标，但实际上它采用的是相对坐标。当您编写如下代码时：

M 50 0 l 50 600

你可能认为这句话的意思是“从 (50,0) 到 (50,600) 画一条线”，但实际上它的意思是“从 (50,0) 开始，向上移动600个单位”。因此出现了倾斜的网格。

你只需要按照下面的方式编写路径（在 l 后用 0 替换 x 和 y）：

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

并且：

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