如何跟踪触摸时的手指运动以绘制平滑曲线？

Question

就像我想要的是，如果我在 iphone 屏幕上快速移动手指，那么我想要使用石英 2d 或 opengl es 做出适当曲线的东西。

我想画一条曲线风格的路径...... 我已经看到了 GLPaint(OpenglES) 示例，但考虑到您的手指移动速度是否很快.....

类似于制作平滑曲线的东西..... 谁有什么例子请告诉我

谢谢

编辑：从下面的答案移动：

谢谢大家......

但是我已经尝试了带有两个控制点的贝塞尔曲线算法，但问题首先是如何计算控制点是否没有预定义的点......

正如我提到的，我的手指移动很快......所以大部分时间我得到的是直线而不是曲线，因为接触点数量较少......

现在正如标记所说的分段方式，我已经尝试过考虑前四个触摸点并将它们呈现在屏幕上，然后删除第一个点，然后再进行接下来的四个点。第 1 步：1,2,3,4 第 2 步：2,3,4,5 就像在那种方法中我得到了重叠，这实际上不是问题，但没有得到平滑的曲线.... ....

但是为了快速移动手指，我必须找到别的东西？？？？？

Answer 1

根据您正在查看的样本点数量，我推荐两种方法：

简单插值

您可以简单地以设定的间隔对手指位置进行采样，然后使用类似Catmull-Rom 样条的方法对采样点进行插值。这比听起来容易，因为您可以轻松地将 Catmull-Rom 样条曲线转换为一系列三次贝塞尔曲线。

方法如下。假设您有四个连续的采样点P0、P1、P2 和P3，连接P1 和P2 的三次贝塞尔曲线由以下控制点定义：

B0 = P1
B1 = P1 + (P2 - P0)/6
B3 = P2 + (P1 - P3)/6
B4 = P2

只要您的样本点不太密集并且超级简单，这应该可以很好地工作。唯一的问题可能是在样本的开头和结尾，因为第一个和最后一个样本点没有插值在开放曲线中。一种常见的解决方法是将您的第一个和最后一个采样点加倍，这样您就有足够的点让曲线通过每个原始采样。

要了解 Catmull-Rom 曲线的外观，您可以试试这个Java applet demonstrating Catmull-Rom splines。

为您的样本拟合曲线

一种更先进（也更困难）的方法是对您的样本点进行最小二乘近似。如果你想试试这个，过程如下所示：

1. 收集样本点
2. 定义 NURBS 曲线（包括其节点向量）
3. 为样本和曲线建立线性方程组
4. 用最小二乘法求解系统

假设您可以选择一个合理的 NURBS 节点向量，这将为您提供一条 NURBS 曲线，该曲线非常接近您的样本点，从而最大限度地减少样本与曲线之间的平方距离。如果需要，NURBS 曲线甚至可以分解为一系列贝塞尔曲线。

如果您决定探索这种方法，那么本书 "Curves and Surfaces for CAGD" by Gerald Farin 或类似的参考资料会非常有帮助。在 Farin 的书第 5 版中，第 9.2 节专门处理了这个问题。第 7.8 节展示了如何使用贝塞尔曲线做到这一点，但您可能需要一个高度曲线才能获得良好的拟合。

Answer 2

Naaff 对 NURBS 技术进行了很好的概述。不幸的是，我认为动态生成平滑的贝塞尔曲线对于 iPhone 来说可能太过分了。我编写绘图应用程序，每秒获得大量的 touchesMoved 事件是一个相当大的挑战。您确实需要优化您的绘图代码，以便在记录各个点时获得良好的性能 - 更不用说构建贝塞尔路径了。

如果您最终使用贝塞尔曲线或 NURBS 曲线表示 - 您可能必须等到用户完成触摸屏幕才能计算平滑路径。在用户移动手指时连续进行数学运算（然后使用 Quartz 重新绘制整个重新计算的路径）不会给你足够高的数据收集率来做任何有用的事情......

祝你好运！

Answer 3

做一些像影子建议的事情。以某种频率获取触摸的位置，然后从中生成Bézier curve。这就是在 Illustrator 等程序中使用鼠标（或平板电脑）绘制路径的方式。