时间戳

首页 > 解决方案 > 关闭从点数组生成的打开的 Catmull-Rom 样条曲线，曲线平滑

javascript - 关闭从点数组生成的打开的 Catmull-Rom 样条曲线，曲线平滑

问题描述

我达到了这个 [Catmull-Rom Spline][1]，我需要更改代码以使用相同的平滑曲线关闭循环。如果我将前两个数字 (x0,x1) 添加到名为“points”的数组的末尾，则循环将关闭，但我没有得到平滑的曲线 -此处示例。提前致谢。

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

标签： javascriptarrayssvgbezierspline

解决方案

您还必须将最后两对坐标添加到数组的开头。然后不要画曲线的第一部分或最后一部分。

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>

推荐阅读