UIView上的翘曲弯曲效果? [英] Warp bend effect on a UIView?

问题描述

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

I'm trying to get a similar effect to the one described in the pictures. The white area on the left isn't on the original photo, it pushes the pixels away. I've tried using Core Image (which offered a few close effects to this) but it was too slow for my needs. I need the effect to be snappy so I can make it responsive to touch.

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

Is there a close effect animation in the iOS sdk that does something similar to this with a UIVIew? ( I couldn't find anything close) If not, can someone offer how to attack this using OpenGL? (code examples are more than welcome)

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

(This effect will take an important roll in an open source class I'm writing so I'd prefer not to use a 3rd party class such as GPUImage if a simpler solution is available (I'm targeting this class to be dependencies free))

推荐答案

沙，

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

What I did was to lay out a rectangular grid of points in my OpenGL coordinates. (I used a 50x50 grid). I then define one or more control points in that same coordinate space. I have a general pinch-stretch algorithm that I wrote. It takes a control point, a radius, and a signed integer for the amount to attract/repel grid points, and applies it to the coordinates of my grid. For a pinch, it pulls the grid points closer to the control point, and for a stretch, it pushes the control points away. The change is greatest at the control point and goes down as the distance from the control point increases up to the radius value.

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

Once I've changed the coordinates of my mesh, I then define a set of triangle strips that draws the entire (warped) rectangular area of my image. I can render my entire texture onto the warped mesh with one OpenGL drawing call. OpenGL takes care of stretching the image pixels to fit the distorted triangles in my mesh of control points. Here is a sample before/after image that uses several control points to create a fat-face look. It shows the mesh grid so you can see what it's doing. It's my ugly mug, so apologies in advance:

还有拉伸后的图片:

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

In my case I wanted the control points along the perimeter of the image to stay in place and only the interior of the image to be distorted, so I added extra code logic to lock the perimeter control points into place. That's why the frame of the image is not pushed in like in your image. That required extra code however.

代码最终使用距离公式计算出每个网格点与控制点的距离，然后用三角函数计算角度，乘以改变距离，然后再用三角函数计算新位置对于每个网格点.不过，由于我只转换了 50x50 的控制点网格，因此速度足以跟上.

The code ends up using the distance formula to figure out how far each grid-point is from a control point, and then trig to figure out the angle, multiplication to change the distance, and then more trig to calculate the new location for each grid-point. Since I'm only transforming a 50x50 grid of control points, though, its fast enough to keep up.

我们的应用 Face Dancer 在应用商店免费提供.(在此链接下载:App Store 中的 Face Dancer 您可能想要下载试试吧.(它包括一些免费的变形，然后提供额外的变形作为应用内购买)还有一个付费的Plus"版本，其中包含所有变形.

Our app, Face Dancer, is free on the app store. (Download it at this link: Face Dancer in the App store You might want to download it and try it out. (It includes a number of free morphs, and then offers additional morphs as in-app purchases) There is also a paid "Plus" version that has all the morphs included.

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

When you're running Face Dancer if you two finger double-tap on the image, it displays the grid of control points it's using to create the morph so you can see what it's doing.

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

There is an OpenGL sample app called GLCameraRipple that is included with Xcode and linked from the documentation. I would suggest taking a look at that as a starting point. It takes a video feed from the camera and draws it to the screen. If you touch the screen it distorts the image as if the screen were a pool of water and your finger was causing ripples in it. It uses a mesh warp technique like what I described.

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

Unfortunately I don't think the app uses GLKit, which is a much easier way to use OpenGL ES 2.0. GLKit offers a number of features that make it much easier to use, including GLKViews and GLKViewControllers.

这篇关于UIView上的翘曲弯曲效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！