如何使用Raphael.js绘制“无限”线？

Question

我正在使用Raphael.js构建一个线条图应用程序，并且需要绘制一条直线穿过两点并到达视口。

我已上传样机，显示什么，我需要实现：

任何帮助表示赞赏。

感谢

Answer 1

SVGs，并推而广之，拉斐尔，不能做无限的线，但是，这并不意味着你不能捏造事实。

你需要一点数学。

首先，取两点（开始和鼠标），得到它的formula。

一旦你有了它，计算它击中视口的边缘。 （可以通过将x或y设置为视口的左侧/右侧/顶部/底部并解决该变量来完成此操作。）一旦您知道线条正在触碰视口的边缘，请将其放回线条公式中以计算你需要在两个点之间画两点。

一旦你具备了这两点，剩下的很简单：

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

Answer 2

也许你应该看看JSXGraph，这似乎是你正在寻找的，这里有一些examples办最多的。它不使用Raphaël，但它使用类似的策略来兼容旧版本的IE（VML后端）。