如何“柔化”折线的边缘？

Question

给定一条由多个点组成的线，如何通过添加中间点使线更平滑/更弯曲/更柔和——同时保持原始点完整且不变？

为了说明这一点，我想在此图中从上图转到下图：

请注意，在上图中，如果我们从底部开始，将会有一个更急的右转。然而，在底部图像中，通过添加位于两个点中间的中间点并使用其他线的角度的平均值，使这种急速右转变得“更柔和”一些。（换句话来说，想象一下赛车行驶的路线，因为它不能突然改变方向。）但是请注意，没有一个原始点被“触及”，我只是添加了更多点。

谢谢！！无论如何，我使用 JavaScript 和 Canvas 来实现它。

Answer 1

每个边缘（e1 和 e2）与每个“中间”边缘（me）相邻

• 让 X = 0.5 x 长度(me)
• 通过将相邻边延伸 X 找到 2 个三次贝塞尔曲线控制点（参见下面的算法）
• 获取三次贝塞尔曲线的中点（通过应用下面的公式）
• 在我的两个坐标之间插入新的“中点”。

FloatPoint ExtendLine(const FloatPoint A, const FloatPoint B, single distance)
{
  FloatPoint newB;
  float lenAB =  sqrt((A.x - B.x) * (A.x - B.x) + (A.y - B.y) * (A.y - B.y));
  newB.X = B.x - (B.x - A.x) / lenAB * distance;
  newB.Y = B.Y - (B.Y - A.Y) / lenAB * distance;
  return newB;
}

编辑：贝塞尔曲线中点的公式：p(0.5) = 0.125(p0) + 0.375(p1) + 0.375(p2) + 0.125(p3)