如何使用 Raphael.js 繪制“無限”線？

Question

我正在使用 Raphael.js 構建一個線圖應用程序，需要繪制一條穿過兩個點並到達視口的線。

我上傳了一個模型，顯示了我需要實現的目標：

任何幫助表示贊賞。

謝謝

Answer 1

SVG 和 Raphaël 不能做無限的線條，但這並不意味着你不能偽造它。

你需要一點數學。

首先，取兩個點（開始和鼠標）並得到它的公式。

一旦你有了它，計算它在視口邊緣的位置。 （您可以通過將 x 或 y 設置為視口的左/右/上/下並求解該變量來做到這一點。）一旦您知道線在哪里碰到視口的邊緣，將其放回線公式中進行計算您需要在兩者之間繪制的兩點。

有了這兩點，rest 就很簡單了：

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

Answer 2

也許您應該看看JSXGraph ，它似乎可以完成您正在尋找的大部分工作，這里有一些示例。 它不使用 Raphaël，但它使用類似的策略來兼容舊版本的 IE（VML 后端）。