How to draw a "infinite" line using Raphael.js?

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

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

Maybe you should have a look at JSXGraph, which seems to do most of what you're looking for, here are some examples. It doesn't use Raphaël but it uses a similar strategy for compatibility for older versions of IE (VML backend).