ios - UIView 的变形\弯曲效果？

Question

我正在尝试获得与图片中描述的效果类似的效果。左侧的白色区域不在原始照片上，它会将像素推开。我试过使用 Core Image(它为此提供了一些接近的效果)但它对我的需要来说太慢了。我需要的效果是活泼的，这样我就可以让它响应触摸。

在 iOS sdk 中是否有一个关闭效果\动画可以用 UIVIew 做类似的事情？ (我找不到任何接近的东西)如果没有，有人可以提供如何使用 OpenGL 进行攻击吗？ (代码示例非常受欢迎)

(此效果将在我正在编写的开源类中发挥重要作用，因此如果有更简单的解决方案可用，我宁愿不使用 GPUImage 等第 3 方类(我的目标是此类无依赖))

Answer 1

沙，

我所做的是在我的 OpenGL 坐标中布置一个由点组成的矩形网格。 (我使用了 50x50 网格)。然后我在同一坐标空间中定义一个或多个控制点。我有一个我写的通用收缩拉伸(stretch)算法。它需要一个控制点、一个半径和一个带符号的整数来表示吸引/排斥网格点的数量，并将其应用于我的网格坐标。对于捏合，它将网格点拉近控制点，而对于拉伸(stretch)，它将控制点推开。变化在控制点处最大，随着距控制点的距离增加到半径值而减小。

一旦我改变了我的网格的坐标，我就定义了一组三角形 strip 来绘制我的图像的整个(扭曲的)矩形区域。我可以通过一个 OpenGL 绘图调用将我的整个纹理渲染到扭曲的网格上。 OpenGL 负责拉伸(stretch)图像像素以适应我的控制点网格中扭曲的三角形。这是使用多个控制点创建胖脸外观的前/后图像示例。它显示了网格，因此您可以看到它在做什么。这是我丑陋的杯子，所以提前道歉:

拉伸(stretch)图像:

在我的例子中，我希望沿着图像周边的控制点保持原位，并且只有图像的内部被扭曲，所以我添加了额外的代码逻辑来将周边控制点锁定到位。这就是为什么图像的框架不像您的图像那样被插入。然而，这需要额外的代码。

代码最终使用距离公式计算出每个网格点与控制点的距离，然后触发计算角度，乘法改变距离，然后更多触发计算新位置对于每个网格点。不过，由于我只变换 50x50 的控制点网格，所以它的速度足以跟上。

我们的应用程序 Face Dancer 在应用程序商店中是免费的。 (通过此链接下载:Face Dancer in the App store 您可能想下载并试用。(它包括许多免费变形，然后提供额外的变形作为应用内购买)还有一个付费的“Plus”版本包含所有变形。

当您运行 Face Dancer 时，如果您用双指双击图像，它会显示用于创建变形的控制点网格，以便您可以看到它在做什么。

有一个名为 GLCameraRipple 的 OpenGL 示例应用程序，它包含在 Xcode 中并从文档链接。我建议以此为起点。它从摄像头获取视频并将其绘制到屏幕上。如果您触摸屏幕，它会扭曲图像，就好像屏幕是一滩水，您的手指在其中引起涟漪。它使用了我所描述的网格变形技术。

不幸的是，我认为该应用程序没有使用 GLKit，这是使用 OpenGL ES 2.0 的一种更简单的方法。 GLKit 提供了许多使其更易于使用的功能，包括 GLKViews 和 GLKViewControllers。