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); 
    } 

レンダリングする（この場合、セルサイズ= 50であり、this._offset = {X：0、Y：0}）

Answer 1

lは絶対座標を取ると仮定していますが、実際には相対座標をとります。あなたが書くとき：

M 50 0 l 50 600 

をあなたはそれが（50、600）に（50,0）から行を書くが、それは実際に開始を意味します（50、0）、移動（50意味を考えています、600）。したがって、歪んだグリッド。

あなただけ（とリットル後XとYを置き換える）このようなvpathを記述する必要があります。

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

と：

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