Гладкое соединение SVG путь

У меня есть случайный набор точек и я хочу создать гладкую фигуру SVG с Raphaeljs. Для соединения точек я использую Catmull-rom-Spline. Проблема в том, что точка, где путь замкнут, не является гладкой.

Это пример пути из моего проекта:

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275 125,275Z

Я также создал jsfiddle: http://jsfiddle.net/ry8kT/

Это может быть достигнуто с кривыми Catmull? Если нет, не могли бы вы дать мне пример, как получить полностью сглаженную форму?

Большое спасибо заранее, Макфарлейн

Источник

2 ответа

Решение

В вашем первом примере путь начался с 125 275 и снова был на 125 275 до закрытия. Поскольку "Z" создает еще один плавный отрезок пути, соединяющий начальную и конечную точки, вы получаете этот маленький цикл. Если вы закроете его перед возвратом к начальной точке, вы получите желаемую плавную форму, касающуюся всех заданных точек.

Это исправленная версия примера пути:

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275Z
Источник

Я исправил это сам:

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

Вот как это работает:

first: установите начало линии в первой точке, за которой сразу следует команда moveTo

M point1.x,point1.y M

это важно для закрытия пути без ребра.

Теперь проведите цикл через каждую имеющуюся точку и добавьте вычисленную среднюю точку между текущей и следующей точкой, за которой следует квадратная кривая со следующей точкой в ​​качестве элемента управления:

mid.x,mid.y C next.x,next.y

Вы вычисляете среднюю точку M между A и B, используя это:

M.x = (A.x-B.x)/2 + B.x
M.y = (A.y-B.y)/2 + B.y

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

C first.x,first.y mid.x, mid.y

Теперь закройте ваш путь, используя Z, чтобы вы могли заполнить форму:

Z

это соединение не видно из-за двух команд moveTo в начале пути.

чтобы увидеть результат и исходный код моего решения, посетите обновленный jsfiddle: http://jsfiddle.net/ry8kT/1/

Источник
Другие вопросы по тегам