Нарисуйте единую квадратичную кривую

Question

Я пытаюсь создать проект, в котором пользователь может рисовать стрелки на холсте, и для этого мне нужна кривая.

Как вы знаете одну квадратичную кривую представляется чем-то вроде этого: M 65 100 Q 300, 100, 300, 20

Где первые две цифры (65, 100) представляет координаты начальной точки, последние два (300,20) представляют координаты конечных точек (конец стрелки). Мне нужно рассчитать средние два числа, основанные на первой и второй точке, чтобы сделать красивую изогнутую линию.

Первая точка будет иметь координаты от mousedown и вторая точка от mouseup.

На данный момент я использую вот так.

function addCurve(Ax, Ay, Bx, By){ 
canvas.add(new fabric.Path('M '+ Ax +' '+ Ay +' Q 100, 100, '+ Bx +', '+ By +'', { fill: '', stroke: 'red' })); 
} 
addCurve(100,0,200,0); 

Итак, как вычислить координаты средней точки, чтобы получить однородную кривую? Я также использую fabric.js в этом проекте.

Answer 1

Первый запуск с двумя конечными точками

x1 = ? // start point 
y1 = ? 
x2 = ? // end point 
y2 = ? 

Чтобы получить среднюю точку

mx = (x1 + x2)/2; 
my = (y1 + y2)/2; 

Вам понадобится векторный от первой до второй точки

vx = x2 - x1; 
vy = y2 - y1; 

линии в 90deg (по часовой стрелке или справа) от начальной и конечной точек

px = -vy; // perpendicular 
py = vx; 

Линия имеет ту же длину, что и расстояние между двумя точками. Квадратичная кривая будет простираться на половину расстояния, которое контрольная точка находится от линии. Поэтому, если мы хотим, чтобы кривая быть 1/4 из длиной, то половина р вектор и добавить к средней точке

cx = mx + px/2; // get control point 
cy = my + py/2; 

Если вы хотите, чтобы кривая согнуть другую сторону

cx = my - px/2; 
cy = my - py/2; 

Или вас можно записать его с количеством кривой, как вар

var curveAmount = 0.25; // How far out the curve is compared to the line length 

cx = my - px * (curveAmount * 2); 
cy = my - py * (curveAmount * 2); 

Сделать curveAmount больше для более кривой, меньше для меньше. Ноль для кривой вообще и отрицательный, чтобы согнуть другой путь.