Нарисуйте линию на холсте

Question

В настоящее время у меня есть этот код:

sample.beginPath(); 
sample.moveTo(X1.x,Y1.x); 
sample.lineTo(X2.x,Y2.y); 
sample.stroke(); 

sample.beginPath(); 
sample.arc(X2.x, Y2.y, 4, 0, 2 * Math.PI, false); 
sample.fill(); 
sample.lineWidth = 1; 
sample.stroke(); 

Это создаст это:

Это будет указывать в любом направлении.

То, что я хочу это:

Примечание:

1.There will only be one line, either Line A or B. 

2.They will always point from left to right. 

3. They are in 45 degrees. 

Answer 1

Взгляните на следующем рисунке:

точки (x1, y1) является отправной точкой мыши. Предполагая, что мышь переместилась в вправо (вам придется обрабатывать случай, когда он перемещается влево), новые координаты мыши будут (x2, y2). Однако мы не хотим нарисовать линию между (x1, y1) и (x2, y2), так как slop этой линии (угол) не будет желательным. Поэтому мы должны вычислить координаты новой точки P, что стоит на нашей линии. Примечание: Я предположил, что координата x этой точки будет равна новой координате x2 мыши-x!

С этим предположением и с помощью некоторой базовой геометрии 2D получаем:

a = x2 - x1 
tan(alpha) = b/a => b = a * tan(alpha) 
P.x = x2 

Значение P.y координат зависит от того, была ли мышь перемещается вверх или вниз от начальной позиции.

IF (y1 > y2) 
    P.y = y1 - b // Mouse has moved up (drawing shows this scenario) 
ELSE 
    P.y = y1 + b // Mouse has moved down (not shown in the drawing) 

Таким образом, мы имеем новую точку Р, и теперь вы можете просто провести грань между (x1, y1) и П. Вы также должны обращаться с какой-то особый случай, например, что если мышь движется слева от отправная точка.

Для того, чтобы получить точную точку P, вы также должны подключить нужный угол (он может быть разным, чем 45 градусов, но он должен быть положительным углом - вы можете получить формулу, которая будет работать нормально с отрицательными углами).