计算经过所有点的曲线

Question

我无法构建一条穿过所有点但又不能像 SVG 中的贝塞尔曲线那样超出这些点的曲线。

我尝试过贝塞尔曲线、二次曲线、平滑曲线和 Casteljau

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

不幸的是，我可以使用第三方来进行映射。

我不想将输出放入，因为那只是噪音，我已经包含了一张图片以供参考。

Answer 1

\n

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

\n

\n

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

\n

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

\n

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

\n

\n

\r\n

\r\n

let svg = document.querySelector("svg")\n\nlet t = 1 / 5;// change this to change the curvature\n\nlet pointsRy = [[100,100],[250,150],[300,300],[450,250], [510,140],[590,250],[670,140]];\n\nthePath.setAttribute("d", drawCurve(pointsRy));\n\nfunction drawCurve(p) {\n\n  var pc = controlPoints(pointsRy); // the control points array\n\n  let d="";\n  d += `M${p[0][0]}, ${p[0][1]}`\n  \n  // the first & the last curve are quadratic Bezier\n  // because I\'m using push(), pc[i][1] comes before pc[i][0]\n  d += `Q${pc[1][1].x}, ${pc[1][1].y}, ${p[1][0]}, ${p[1][1]}`;\n\n\n  if (p.length > 2) {\n    // central curves are cubic Bezier\n    for (var i = 1; i < p.length - 2; i++) {\n      \n     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]}`; \n\n    }//end for\n    // the first & the last curve are quadratic Bezier\n    let n = p.length - 1;\n    d+=`Q${pc[n - 1][0].x}, ${pc[n - 1][0].y} ${p[n][0]},${p[n][1]}`;\n  }\n  return d;\n}\nfunction controlPoints(p) {\n  // given the points array p calculate the control points\n  let pc = [];\n  for (var i = 1; i < p.length - 1; i++) {\n    let dx = p[i - 1][0] - p[i + 1][0]; // difference x\n    let dy = p[i - 1][1] - p[i + 1][1]; // difference y\n    // the first control point\n    let x1 = p[i][0] - dx * t;\n    let y1 = p[i][1] - dy * t;\n    let o1 = {\n      x: x1,\n      y: y1\n    };\n\n    // the second control point\n    var x2 = p[i][0] + dx * t;\n    var y2 = p[i][1] + dy * t;\n    var o2 = {\n      x: x2,\n      y: y2\n    };\n\n    // building the control points array\n    pc[i] = [];\n    pc[i].push(o1);\n    pc[i].push(o2);\n  }\n  return pc;\n}

\r\n

body{background:black; margin:1em;}\nsvg{border: 1px solid #999;}\npath{fill:none; stroke:white;}

\r\n

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

\r\n

\r\n

\r\n

\n