Question

I am building a line graph application using Raphael.js and need to draw a line that passes through two points and reach the viewport.

I have uploaded a mockup that shows what I need to achieve:

Any help is appreciated.

Thanks

Answer 1

SVGs and, by extension, Raphaël, cannot do infinite lines, but that doesn’t mean you can’t fake it.

You’ll need to to a bit of math.

First, take the two points (start and mouse) and get the formula for it.

Once you have that, calculate where it hits the edges of the viewport. (You can do this by setting x or y to the left/right/top/bottom of the viewport and solving for that variable.) Once you know where the line is hitting your viewport’s edges, put it back into the line formula to calculate the two points you need to draw between.

Once you have these two points, the rest is easy:

paper.path("M" + point1.x + " " + point1.y + "L" + point2.x + " " + point2.y);