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

Posted 2023-03-12

【中文标题】如何跟踪触摸时的手指运动以绘制平滑曲线？

【英文标题】：how can i trace the finger movement on touch for drawing smooth curves?

【发布时间】：2009-06-27 04:36:15

【问题描述】：

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

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

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

谢谢

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

谢谢大家......

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

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

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

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

【问题讨论】：

我不是 iPhone 开发人员，但您可能必须每 20-50 毫秒获取一次触摸位置，然后从所有这些中选择 10+ 点并用它来计算理想值曲线的路径。 （由于缺乏真正的知识而发表评论）

您可能想要查看样条函数插值，请参阅en.wikipedia.org/wiki/Spline_interpolation。

【参考方案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。

为您的样本拟合曲线

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

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

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

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

【参考方案2】：

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

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

祝你好运！

【讨论】：

那么你会推荐什么？ -1 因为这里没有答案。 （但我猜 +1 是为了添加一些有用的上下文......所以净 0。）

【参考方案3】：

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

【讨论】：

添加到大卫的评论中，您可能想要做的是从笔划的一端开始，并以分段方式构建适合数据点的样条曲线。