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

Question

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

我上传了一个模型,显示了我需要实现的目标:

任何帮助表示赞赏.

谢谢

Answer 1

SVG和Raphaël不能做无限的行,但这并不意味着你不能伪造它.

你需要一点点数学.

首先,取两点(开始和鼠标)并获得它的公式.

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

一旦你有这两点,其余的很容易:

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