javascript - 如何生成具有确切点数的线？

Question

我必须从包含 n 个点的数据集中生成一条路径。我正在通过此数据集中的点绘制三次样条。生成的路径必须包含准确数量的投影路径点。

我的问题不在于曲线的绘制，而在于路径点沿 x 轴的分布以产生由精确数字组成的路径路径点。 这就是为什么我将以下示例简化为一维点数组，应该通过这些点绘制一条直线。数据集中的每个点都应该代表曲线段的开始(即使由于简化，曲线实际上是一条线)。

我目前的天真方法并不准确，即它不会产生包含指定点数的路径(根据数据集的密度和指定的 targetLength，它会偏离 4-5 个点)。

我想我必须使用线性插值来获得准确的结果，但我不知道该怎么做。谁能帮助我或指出正确的方向？

天真的方法(javascript):

// Array with floating point values constrained between 0 - 1
// Think of each value as the beginning of a line segment.
const dataset = [0, 0.123, 0.3432, 0.454, 0.56, 0.8334, 0.987, 1];

// Path should have this many points
const targetLength = 1024;

// Step distance between points
const delta = 1 / targetLength;

// The path array we're generating
const path = [];

// For each point (segment)
for (let i = 0; i < dataset.length - 1; i++) {

  const x1 = dataset[i]; // current point
  const x2 = dataset[i + 1]; // next point
  const xd = x2 - x1 - delta; // dist between current and next point(-delta)

  // For each step in the segment generate a path-point
  for (let k = 0; k <= xd; k += delta) {
    // For this example we're only pushing the x-value onto the array.
    // In the real implementation I'm calculating a y-value to plot a curve
    // and push an array of [x, y] onto the dataset.
    path.push(dataset[i] + k);
  }

}

// expect: path.length === targetLength
console.log(path.length);

在上面的示例中，我希望 path.length 等于 targetLength (1024)。我可以将生成的路径作为一个整体并插入整个数组，但我认为我正在寻找一种更智能的方法来首先生成路径。非常感谢任何帮助!

Answer 1

看起来你想要的真的只是这个:

for (let i=0; i<targetLength; ++i) {
    path.push(i / (targetLength-1));
}

...因为这就是您要近似的值，它实际上对某些类型的三次样条插值有意义。但是，您通常不需要存储这些路径点，因为它们很容易计算。