我正在尝试获得与图片中描述的效果类似的效果。左侧的白色区域并不是原始照片上的**,它会将像素推开。我尝试过使用Core Image(它提供了一些类似的效果),但它对我的需求来说太慢了。我需要效果快速,这样我才能对触摸做出React。
iOS SDK中是否有一个关闭效果\动画,可以用UIView做类似的事情?(我找不到任何接近的东西)如果没有,有人可以提供如何使用OpenGL攻击它吗?(代码示例非常受欢迎)
(This在我正在编写的一个开源类中,一个效果将发挥重要作用,所以如果有更简单的解决方案,我宁愿不使用第三方类,如GPUImage(我的目标是这个类是无依赖性的))
5条答案
按热度按时间zy1mlcev1#
莎
我所做的是在OpenGL坐标中布置一个矩形网格。(我使用了一个50 x50的网格)。然后我在同一个坐标空间中定义一个或多个控制点。我有一个我写的通用捏拉算法。它需要一个控制点,一个半径和一个有符号的整数来吸引/排斥网格点,并将其应用于我的网格坐标。对于捏拉,它会将网格点拉近控制点,而对于拉伸,它会将控制点推开。控制点处的变化最大,随着与控制点的距离增加到半径值,变化会减小。
一旦我改变了网格的坐标,然后定义一组三角形条带,绘制整个我的图像的(扭曲的)矩形区域。我可以通过一个OpenGL绘图调用将整个纹理渲染到扭曲的网格上。OpenGL负责拉伸图像像素以适应我的控制点网格中的扭曲三角形。下面是一个使用几个控制点创建胖-脸看。它显示了网格,所以你可以看到它在做什么。这是我丑陋的杯子,所以提前道歉:
拉伸图像:
在我的例子中,我希望沿着图像周边的控制点保持不变,只有图像的内部被扭曲,所以我添加了额外的代码逻辑来锁定周边控制点。这就是为什么图像的框架不像你的图像那样被推入。这需要额外的代码。
代码最后使用距离公式来计算每个网格点到控制点的距离,然后使用trig来计算Angular ,使用乘法来改变距离,然后使用更多的trig来计算每个网格点的新位置。
我们的应用程序Face Dancer在应用程序商店中是免费的。(在此链接下载:Face Dancer in the App store你可能想下载并试用一下。(它包括许多免费的变形,然后提供额外的变形作为应用内购买)还有一个付费的“Plus”版本,其中包括所有的变形。
当你运行Face Dancer时,如果你用两个手指双击图像,它会显示它用来创建变形的控制点网格,这样你就可以看到它在做什么。
有一个名为GLCameraRipple的OpenGL示例应用程序,它包含在Xcode中,并从文档中链接。我建议您先看看它。它从相机获取视频并将其绘制到屏幕上。如果您触摸屏幕,它会扭曲图像,就好像屏幕是一池水,您的手指会在其中产生涟漪。它使用了我所描述的网格扭曲技术。
不幸的是,我不认为该应用程序使用GLKit,这是一个更容易使用OpenGL ES 2.0的方法。GLKit提供了许多功能,使它更容易使用,包括GLKViews和GLKViewControllers。
ygya80vv2#
有一个新的很棒的开源类,它用一个很棒的例子完全回答了我的问题,你可以找到它here。
w51jfk4q3#
另一个你可能会看到的东西是iOS 6中添加的核心图像孔失真过滤器(CIHoleDistortion)。它创建的效果与你想要的效果相当。下面是我编写的测试程序生成的示例图像,非常接近。
然而,你会注意到苹果的滤镜会导致图像从边框边缘“拉开”。我认为这是一个错误,但祝你好运,让苹果修复它:
ozxc1zmp4#
你所展示的看起来就像一个网格扭曲。这将是简单的使用OpenGL,但“简单的OpenGL”就像简单的火箭科学。
我为我的公司写了一个iOS应用程序,叫做Face Dancer,它能够使用OpenGL对内置摄像头的视频进行60 fps的网格扭曲动画,但这需要大量的工作。(它可以对面部进行funhouse镜像类型的更改-想想“fat booth”现场,还有很多其他效果。)
n1bvdmb65#
我将研究两种方法:首先,核心图像过滤器,其中包括一些你似乎需要的失真过滤器。主要问题是,其中许多在iOS中不可用(但在OSX上...)。
第二,GPUImage库有很多失真过滤器,你也可以使用。这里有一个Q,讨论如何使用它们:
如何使用OpenGL ES对UIImage应用扭曲?