如何在给定一组数据点的情况下渲染平滑路径？

Question

过去几天我一直对路径渲染感到困惑，但没有任何真正的解决方案。

通过路径渲染，我的意思是给定一组 x,y 数据点（在不同的距离处）以在给定数据集点之间以固定间隔绘制一条固定长度的虚线（或在我的情况下为旋转四边形）以创建一条平坦的道路。

如果你有 iPhone 的飞行控制，我正在尝试创建与该游戏中的路径渲染类似的效果。

这是我的问题。如果图形的宽度 + 间隙不能精确地设计为 2 个数据集点之间的距离，那么我就会留下重叠或欠重叠。我对此的唯一解决方案是

1) 将重叠/欠重叠点作为下一个数据集点的终点，然后从那里绘制到下一个点。

2) 始终在最终端点下绘制并从下一个数据点重新开始。

这些解决方案都不理想，都存在问题。

谁有更好的解决方案？

任何帮助将不胜感激。

以下屏幕说明了我正在尝试创建的内容：http://www.firemint.com/flightcontrol/screenshots-peaceful.html

粗虚线。

更新：

您好，我尝试通过曲线进行渲染，我计算了三次曲线（通过 4 个控制点）。然而，问题是插值之一。给定 0 和 1 我可以通过任何 2 点。但是我想逐步完成整个路径（多个控制点）。问题是某些控制点的距离会不同，因此以恒定的步进增量（例如 0.2）步进会产生不规则的结果。我意识到为了正确地通过整个路径，我需要计算整个曲线的长度......问题是我该怎么做？ ...还是有其他方法？

干杯 丰富

Answer 1

有一个名为“CGPathAddQuadCurveToPoint”的 CoreGraphics 函数用于绘制平滑路径。 An example on how to use it is on GitHub.

Answer 2

您可能想看看Bezier curves 或hermite curves，它们并不难计算，而且您会得到漂亮的柔和曲线。

Answer 3

您可能应该查看Bézier curves 和Splines 算法。

Answer 4

您是否完全受限于固定大小的四边形？理想的解决方案是将最后一个四边形截断为正确的大小。

如果您受到限制，您可以做几件事。如果您正在绘制虚线，您可以改变虚线的距离，以确保您永远不会在端点上出现部分四边形。这可能会在视觉上分散注意力，因为距离会根据段的长度进行调整。

编辑：

啊，图片有帮助。我假设因为这是在 iPhone 上，所以你会得到一系列点，它们之间的画线会产生可接受的曲线。如果是这种情况，使用样条线/曲线图元可能是矫枉过正。我可能会简单地通过在距最后一个数据点给定距离的每个数据点上绘制四边形来接近绘制线。

算法类似于：

1. 在第一个数据点上绘制四边形（适当旋转）
2. 遍历点列表，直到距离最后一个点至少 X 距离
3. 在当前点和上次访问的点之间移动，以找到放置下一个四边形的确切中心。
4. 绘制四边形（适当旋转）
5. 转到第 2 步
6. 如果您有最后一个四边形的部分点，请照常绘制（这将比截断它提供更好的视觉效果）。

为了好玩，让两点之间的距离 D 小于两点之间的距离（这在 2D 情况下可能更简单，但我通常喜欢工作）：

vector v = point2 - point1;
normalize(v);
v *= D;
finalPoint = point1 + v;