Есть ли варианты для инвертирования кривой Безье?(cytoscape.js)

Question

Я пытаюсь придать форму своим ребрам так:

статический макет желаемых ребер / кривых

Я могу создавать S-образные кривые, но я бы хотел, чтобы они инвертировались при переходе вниз от корневого узла (аналогично рисунку). Я не заметил ничего в документах, описывающих настройки для этого.

У меня есть демо здесь: https://codesandbox.io/s/l5m6mnlqrz

Что также могло бы сработать, если бы мне удалось сгладить 90-градусную кривую в стиле «такси», хотя это не представляется возможным.

Любые предложения приветствуются. Благодаря.

Answer 1

Невозможно создать желаемую форму, используя одну кривую Безье, потому что центральный диапазон должен быть вертикальным.Но две сопряженные кривые могут дать соответствующий результат.

Для точек A (слева) и B (не важно - ниже или выше точки B):

Первая кривая имеет начальную точку P0=(XA, YA) и окончаниеточка P3=((XA + XB)/2, ((YA + YB)/2)

Первая контрольная точка должна находиться на той же горизонтали, что и начальная точка, вторая - на той же вертикали, что и конечная точка

X1, Y1 = X0 + DX, Y0
X2, Y2 = X3, Y3 - DY

Параметры DX and DY определяют округлениепод прямым углом.Попробуйте установить их как DX = (X3 - X0) / 3 и DY = (Y3 - X0) / 3 m, затем измените знаменатель, чтобы получить желаемую форму кривой

Вторая часть - зеркальная кривая с точками

 (X3, Y3), (X3, Y3 + DY), (XB - DX, YB), (XB, YB)