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

Question

在过去的几天里,我一直在为路径渲染感到困惑而没有任何真正的解决方案.

通过路径渲染,我的意思是给出一组x,y数据点(在不同的距离),在给定数据设定点之间以规则的间隔绘制一条固定长度的虚线(或者在我的情况下是旋转的四边形),以创建平滑的路径.

如果您有iPhone的飞行控制,我试图创建与该游戏中的路径渲染类似的效果.

这是我的问题.如果图形的宽度+间隙不能精确地设计到2个数据集点之间的距离,那么我将留下重叠或重叠.我唯一的解决方案是

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;