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(我将此类定位为没有依赖项))

(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))

推荐答案

Sha，

我要做的是在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.

该代码最终使用距离公式计算出每个网格点距控制点的距离，然后通过trigger计算出角度，相乘以更改距离，然后再通过trigger计算出新位置对于每个网格点.不过，由于我只转换了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.

Xcode附带了一个名为GLCameraRipple的OpenGL示例应用程序，该应用程序从文档中链接了该应用程序.我建议以此为起点.它从摄像机获取视频输入并将其绘制到屏幕上.如果触摸屏幕，它会使图像失真，就好像屏幕是一潭水，而手指在其中引起波纹.它使用了我所描述的网格变形技术.

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屋！