如何在抛物线上按等曲线间距放置多个圆形？

你的问题在于当前代码是按x轴方向等间距取点，但抛物线的曲率是变化的，导致相邻圆形在曲线上的实际弧长间距不一致。要实现沿抛物线等弧长间距放置圆形，最简便的方式是用数值近似迭代法——因为抛物线的弧长没有初等解析解，用逐步累加的方式可以快速得到满足要求的点。

实现代码 #

const numberOfCircles = 20;
const curve = 200; // 抛物线顶点到端点的y轴高度差
const circleRadius = 10;
const arcSpacing = 2 * circleRadius + 5; // 相邻圆形沿曲线的中心间距

// 定义抛物线方程：y = a*(x - width/2)^2，先预估初始宽度
let width = (numberOfCircles - 1) * arcSpacing;
const a = curve / Math.pow(width / 2, 2);

const points = [];
let currentX = 0;
let currentY = a * Math.pow(currentX - width / 2, 2);
points.push({ x: currentX, y: currentY });

// 用小步长迭代累加弧长，找到下一个点
const stepSize = 0.5; // 步长越小精度越高，可按需调整
for (let i = 1; i < numberOfCircles; i++) {
  let accumulatedLength = 0;
  while (accumulatedLength < arcSpacing) {
    const nextX = currentX + stepSize;
    const nextY = a * Math.pow(nextX - width / 2, 2);
    // 用直线距离近似小弧段长度
    const segmentLength = Math.sqrt(Math.pow(nextX - currentX, 2) + Math.pow(nextY - currentY, 2));
    accumulatedLength += segmentLength;
    // 累加超量时回退，让位置更精准
    if (accumulatedLength > arcSpacing) {
      const overshoot = accumulatedLength - arcSpacing;
      const ratio = overshoot / segmentLength;
      currentX = nextX - stepSize * ratio;
      currentY = a * Math.pow(currentX - width / 2, 2);
      break;
    }
    currentX = nextX;
    currentY = nextY;
  }
  points.push({ x: currentX, y: currentY });
}

// 可选：根据最终生成的点调整画布宽度
const finalWidth = points[points.length - 1].x;
console.log(points);

关键逻辑说明 #

• 放弃x轴均分的思路，从抛物线起点开始，每次移动极小的stepSize，用小段直线距离近似弧长，累加直到达到设定的arcSpacing，记录当前坐标。
• 当累加长度超过目标间距时，通过比例回退修正位置，保证间距精度。
• stepSize可灵活调整，0.5~1的步长基本能满足视觉层面的精度要求，若需要更高精度可缩小步长。

这种方法无需复杂数学推导，逻辑直观，能快速实现沿抛物线等弧长间距放置元素的需求。

内容的提问来源于stack exchange，提问作者zavg