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

Question

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

我上传了一个显示我需要实现的内容的模型：

感谢任何帮助。

由于

Answer 1

SVGs，以及Raphaël，不能做无限的行，但这并不意味着你不能伪造它。

你需要一点数学。

首先，取两点（开始和鼠标）并获取formula。

完成后，计算它到达视口边缘的位置。 （您可以通过将x或y设置为视口的左/右/顶部/底部并求解该变量来完成此操作。）一旦知道线在哪里击中视口的边缘，就将其放回到线公式中进行计算你需要画两点。

一旦你有这两点，其余的很容易：

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

Answer 2

也许你应该看一下JSXGraph，这似乎可以解决你所寻找的大部分问题，这里有一些examples。它不使用Raphaël，但它使用类似的策略来兼容旧版本的IE（VML后端）。