Закройте открытый сплайн Катмулла-Рома, сгенерированный из массива точек, с плавной кривой

Я достиг этого [Catmull-Rom Spline][1], и мне нужно изменить код, чтобы замкнуть цикл с той же плавной кривой. если я добавлю в конец массива с именем «точки» первые два числа (x0,x1), цикл закроется, но я не получу плавной кривой - пример здесь. Заранее спасибо.

[1]: https://codepen.io/osublake/pen/BowJed?editors=0010

javascript svg arrays spline bezier
person Stan Andrei    schedule 13.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы также должны добавить две последние пары координат в начало массива. Тогда не рисуйте первый участок или последний участок кривой.

https://codepen.io/PaulLeBeau/pen/KBERmB?editors=0010

var tension = 1;

var poly = document.querySelector("polyline");
var path = document.querySelector("path");

var points = [
  600,200,
  700,350,

  100,350,  
  200,100,
  300,350,
  400,150,
  500,350,
  600,200,
  700,350,
  
  100,350,
  200,100
];

poly.setAttribute("points", points);
path.setAttribute("d", solve(points, tension));

function solve(data, k) {

  if (k == null) k = 1;
  
  var size = data.length;
  var last = size - 4;    

  var path = "M" + [data[2], data[3]];

  for (var i = 2; i < size - 4; i +=2) {

    var x0 = i ? data[i - 2] : data[0];
    var y0 = i ? data[i - 1] : data[1];

    var x1 = data[i + 0];
    var y1 = data[i + 1];

    var x2 = data[i + 2];
    var y2 = data[i + 3];

    var x3 = i !== last ? data[i + 4] : x2;
    var y3 = i !== last ? data[i + 5] : y2;
    
    var cp1x = x1 + (x2 - x0) / 6 * k;
    var cp1y = y1 + (y2 - y0) / 6 * k;

    var cp2x = x2 - (x3 - x1) / 6 * k;
    var cp2y = y2 - (y3 - y1) / 6 * k;
   
    path += "C" + [cp1x, cp1y, cp2x, cp2y, x2, y2];
  } 

  return path;
}
body {
  background: #222;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

polyline {
  fill: none;
  stroke: #888;
  stroke-width: 1;
}

path {
  fill: none;
  stroke: cornflowerblue;
  stroke-width: 2;
}
<svg>
  <polyline />
  <path />
</svg>

person Paul LeBeau    schedule 13.08.2018