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) を移動することを意味します。したがって、歪んだグリッド。

次のように vpath を記述する必要があるだけです ( lの後のxとyを0に置き換えます)。

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

と：

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