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

Question

У меня есть случайный набор точек и я хочу создать гладкую фигуру 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/

Может ли это быть достигнуто с помощью кривых Кермулла?Если нет, не могли бы вы дать мне пример, как получить полностью сглаженную форму?

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

Answer 1

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

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

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

Answer 2

Я сам исправил:

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

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

первый: установите начало линии в первой точке, за которой сразу следует команда 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/