Как нарисовать "бесконечную" линию, используя Raphael.js?

Question

Я строю приложение линейного графика с использованием Raphael.js и мне нужно нарисовать линию, которая проходит через две точки и достигает области просмотра.

Я загрузил макет, который показывает, чего мне нужно достичь:

Любая помощь приветствуется.

Спасибо

Answer 1

SVG и, соответственно, Raphaël, не могут делать бесконечные линии, но это не значит, что вы не можете подделать это.

Тебе нужно немного математики.

Сначала возьмите две точки (старт и мышь) и получите для нее формулу .

Как только вы это сделаете, вычислите, где он касается краев области просмотра. (Вы можете сделать это, установив x или y слева / справа / сверху / снизу от окна просмотра и решив для этой переменной.) Как только вы узнаете, где линия касается краев вашего окна просмотра, поместите ее обратно в формулу строки для вычисления две точки, которые вы должны провести между.

Если у вас есть эти две точки, остальное легко:

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

Answer 2

Может быть, вам стоит взглянуть на JSXGraph , который, кажется, делает большую часть того, что вы ищете, вот несколько примеров .Он не использует Raphaël, но использует аналогичную стратегию для совместимости с более старыми версиями IE (бэкэнд VML).