如何给出一组数据点的平滑路径？

Question

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

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

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

这是我的问题。如果图形的宽度+间隙不能准确定位在两个数据集点之间的距离内，那么我会留下一个重叠或不足。我唯一的解决方案是：

1）将重叠/重叠点作为下一个数据设置点的终点，然后从那里绘制到以下点。

2）始终绘制在最终的终点下，并从下一个数据点开始刷新。

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

有没有人有更好的解决方案？

任何帮助将不胜感激。

以下的画面是什么，我试图创建：http://www.firemint.com/flightcontrol/screenshots-peaceful.html

的粗虚线。

更新：

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

干杯 丰富

Answer 1

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

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

编辑：

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

算法会是这样的：

1. 绘制第一个数据点四（适当地旋转）
2. 导线点列表，直到你的最后一点是，至少距离X
3. 当前点和最后一个访问点之间的Lerp，以查找放置下一个四边形的确切中心。
4. 绘制四（适当地旋转）
5. 转到步骤2
6. 如果你有最后四部分点绘制为正常（这会给出一个比截断它更好的视觉）。

为了好玩，两点之间的一段距离d小于这两个点之间的距离线性插值（这可能是在2D情况下，更简单，但我喜欢一般工作）：

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

Answer 2

你可能想看看Bezier curves或hermite curves他们不是很难计算，你会得到很好的柔和曲线。

Answer 3

您应该检查出Bézier curves和Splines算法。

Answer 4

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