CODEWITHSUNDEEP
javascriptcanvasgriddrawingraphael
Louis Boux
Louis Boux

Reputation: 1238

What is the correct way to draw straight lines using raphael.js?

I'm having trouble drawing a simple grid using raphael.js.

I'm using paper.path(), and everything looks fine with my path strings :
enter image description here

but somehow this gets rendered :
enter image description here

here's the code I'm using to render this "grid"

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

(In this case cellSize = 50, and this._offset = {x:0, y:0})

Upvotes: 6

Views: 6856

Answers (1)

McGarnagle
McGarnagle

Reputation: 102743

The problem is that you're assuming l takes an absolute coordinate, but it actually takes a relative one. When you write:

M 50 0 l 50 600

You're thinking it means write a line from (50,0) to (50, 600) but it actually means start at (50, 0), move (50, 600). Hence the skewed grid.

You just need to write the vpaths like this (replacing x and y after the l with 0):

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

and:

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

Upvotes: 7

Related Questions