Построение кривых Безье SVG

#svg #вектор

В SVG есть встроенная функция построения кривых Безье 2-ой и 3-ей степени, т.е. только
по трем и четырем точкам. Нужно строить по произвольному кол-ву точек.

Можно было бы строить кривую произвольной степени, но это не эффективно, и слишком
долго, мне надо строить почти мгновенно.

Поэтому хотелось бы объединить несколько кривых второй степени в одну большую. 

Как это сделать? Желательно с готовым кодом.

P.S. Пишу векторную рисовалку в академических  целях
    

Ответы

Ответ 1

Приведу коды примеров сначала одиночной кривой Безье второго порядка, затем с присоединенной
второй кривой и третий пример двух кривых с гарантированным гладким соединением.










Для соединения двух кривых к конечной точке первой кривой присоединяется начальная
точка второй кривой. В этом случае координаты начальной точки второй кривой не указываются.











Для гарантированного получения гладкого, без изломов соединения двух кривых применяется
команда – (T) или (t) (для относительных координат).










Далее можно присоединять сколько угодно кривых Безье.
Примеры кода взяты  здесь


Ответ 2

Ну, насколько я помню, чтобы кусочки между собой гладко состыковывались, должно выполнятся
два правила:


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


То есть, получается как-то так:



(Извиняюсь за качество, рисовал на скорую руку).

Готового кода нет, но, думаю, тут его не очень сложно будет написать.