给定一组数据点如何渲染平滑路径？

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. 当前点和最后一个访问点之间的Lerp，以找到放置下一个四边形的确切中心。
4. 绘制四边形（适当旋转）
5. 转到第2步
6. 如果你有最后一个四边形的部分点正常（这将比截断它更好的视觉效果）。

为了好玩，要在两点之间缩放一段距离D，该距离D小于两点之间的距离（这在二维情况下可能更简单，但我喜欢一般工作）：

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