Вычисление контрольных точек для сокращенного/гладкого пути SVG Безье

Ссылка: Официальная ссылка на SVG

Привет, мужчины и женщины, у меня возникают проблемы с сокращенными (определяемыми S или s в pathdata) кривыми безье, определяемыми как пути SVG. В частности, как вычислить первую контрольную точку.

Скажем, у нас есть одна команда curveto с контрольными точками (X1, Y1) и (X2, Y2), конечная точка (X3, Y3) и начальная точка (X0, Y0).

Далее идет команда сокращенной/гладкой кривой с первой контрольной точкой (X4, Y4) и второй контрольной точкой (X5, Y5). Предположим, что все в абсолютных координатах для простоты.

Как вычислить неизвестную первую контрольную точку (X4, Y4) из других известных точек?

Ответы

Ответ 1

Ваша первая точка - это последняя точка предыдущей кривой. В этом случае это будет (x3, y3). Тогда ваша вторая точка в короткой руке является конечной точкой для длины кривой, обозначенной сокращением.

Если мы переведем ваши пути в обе версии полной длины, мы бы получили:

M X0, Y0 C X1, Y1 X2, Y2 X3, Y3 
M X3, Y3 C XR, YR X4, Y4 X5, Y5

Где XR, YR - отражение последней контрольной точки предыдущей кривой относительно первой точки текущей кривой.

XR, YR - это просто отражение P2 около P3, поэтому:

XR = 2*X3 - X2 and 
YR = 2*Y3 - Y2

Ответ 2

вы можете обработать последнюю контрольную точку от последней кривой и конечную точку последней кривой (которая является первой точкой новой кривой) в качестве строки, а зеркальная контрольная точка должна лежать на этой линии на расстоянии равное расстоянию от последней контрольной точки до последней конечной точки

Ответ 3

Я нашел это. Кратчайший ответ, который я могу привести:

Мы соединяем точки привязки, окружающие начальную и конечную точки привязки, линией (назовем их opposed-lines):

Чтобы линия была гладкой, положение каждой контрольной точки должно быть относительно его opposed-line:

Контрольная точка находится на линии, параллельной opposed-line, и касательной к текущей точке привязки.

На этой касательной линии, расстояние от точки привязки к контрольной точке зависит от длины opposed-line и произвольного соотношения smoothing.

Начальная контрольная точка движется в том же направлении, что и opposed-line, а конечная контрольная точка движется назад.

// When 'current' is the first or last point of the array
// 'previous' or 'next' don't exist.
// Replace with 'current'
const p = previous || current
const n = next || current

Моя интерпретация:

Рассчитайте 2 контрольные точки для каждой пары точек "привязки" (фактической кривой).
Если вычисляются точки 1 (start/end - 1) и 2 (start + 1/end):
- Первая контрольная точка проходит от точки 1 (start) параллельно к {линии, идущей из точки 0 (start - 1) в точку 2 (start + 1)}.
- Вторая контрольная точка проходит в обратном направлении от точки 2 (end) параллельно {линии, идущей из точки 1 (end - 1) в точку 3 (end + 1)}.
Расстояние от точки 1 или 2 до соответствующей контрольной точки является отношением требуемой переменной гладкости (0,0 - 1,0) кривой к длине параллельных линий. (Вы можете использовать базовый триг, то есть cos() и sin() для углов.)
В случае конечных точек (которые не имеют точки до/после них), замените start - 1 на start или end + 1 на end.