Я сам исправил:
Вместо использования сплайна 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/