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

问题是你假设我采用绝对坐标,但它实际上需要一个相对的坐标.当你写:

M 50 0 l 50 600

你认为这意味着写一条从(50,0)到(50,600)的线,但它实际上意味着从(50,0)开始,移动(50,600 ).因此偏斜的网格.

你只需要编写这样的vpaths(更换X和Ÿ后升与0):

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

和:

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