计算一条曲线，使其穿过所有点

Question

我在构建曲线时遇到了问题，需通过曲线经过所有点但不超出这些点，而不像SVG中的贝塞尔曲线那样。

我尝试了 贝塞尔曲线， 二次曲线， 平滑曲线， 和Casteljau

这是我的示例链接https://dotnetfiddle.net/KEqts0

不幸的是，我不能使用第三方工具进行映射。

我不想把输出放在这里因为那只会产生噪音，我已经包括了一张图片供参考。

- user1730289

---

“穿过所有点的曲线”：这个描述不够明确。分段线性曲线对您是否可行？ - Klaus Gütter

Answer 1

观察：最初的问题标记为javascript。在我发布答案后，javascript标记被删除了（不是由问题发起者删除）。

给定一个点阵数组pointsRy，您需要计算Bézier曲线的控制点位置。第一个和最后一个曲线是二次贝塞尔曲线。所有其他曲线都是三次贝塞尔曲线。

这是一张图片，在图片中，我标记了点以及穿过每个点的曲线的切线。控制点是切线的起点和终点。

相对于两点距离计算出切线的大小：let t = 1 / 5;更改此值以更改曲线的曲率。

let svg = document.querySelector("svg")

let t = 1 / 5;// change this to change the curvature

let pointsRy = [[100,100],[250,150],[300,300],[450,250], [510,140],[590,250],[670,140]];

thePath.setAttribute("d", drawCurve(pointsRy));

function drawCurve(p) {

  var pc = controlPoints(pointsRy); // the control points array

  let d="";
  d += `M${p[0][0]}, ${p[0][1]}`
  
  // the first & the last curve are quadratic Bezier
  // because I'm using push(), pc[i][1] comes before pc[i][0]
  d += `Q${pc[1][1].x}, ${pc[1][1].y}, ${p[1][0]}, ${p[1][1]}`;


  if (p.length > 2) {
    // central curves are cubic Bezier
    for (var i = 1; i < p.length - 2; i++) {
      
     d+= `C${pc[i][0].x}, ${pc[i][0].y} ${pc[i + 1][1].x},${pc[i + 1][1].y} ${p[i + 1][0]},${p[i + 1][1]}`; 

    }//end for
    // the first & the last curve are quadratic Bezier
    let n = p.length - 1;
    d+=`Q${pc[n - 1][0].x}, ${pc[n - 1][0].y} ${p[n][0]},${p[n][1]}`;
  }
  return d;
}
function controlPoints(p) {
  // given the points array p calculate the control points
  let pc = [];
  for (var i = 1; i < p.length - 1; i++) {
    let dx = p[i - 1][0] - p[i + 1][0]; // difference x
    let dy = p[i - 1][1] - p[i + 1][1]; // difference y
    // the first control point
    let x1 = p[i][0] - dx * t;
    let y1 = p[i][1] - dy * t;
    let o1 = {
      x: x1,
      y: y1
    };

    // the second control point
    var x2 = p[i][0] + dx * t;
    var y2 = p[i][1] + dy * t;
    var o2 = {
      x: x2,
      y: y2
    };

    // building the control points array
    pc[i] = [];
    pc[i].push(o1);
    pc[i].push(o2);
  }
  return pc;
}

body{background:black; margin:1em;}
svg{border: 1px solid #999;}
path{fill:none; stroke:white;}

<svg viewBox="0 0 800 400">  
  <path id="thePath" stroke="white"/>
</svg>

- enxaneta

---

你应该得到100万个赞，因为这太难了，很难找到一个能够执行此功能（通过0..N点数组生成贝塞尔+立方曲线路径）的可靠代码。非常感谢你！它完美地运行。 - Eric