歪曲UIView的一部分

Question

我有一个有趣的问题。希望有一个有趣的解决方案：）

我有一个占用iPad屏幕宽度的UIScrollView视图。滚动视图的内容显然更宽。

现在，我想将转换应用到滚动视图的可见部分（即屏幕区域），以轻轻地向上弯曲两端。

因此，有两个问题：

1）这种转变是否可行？基本上我想将左右两侧向上移动，并使视图的顶部和底部边缘根据需要弯曲，使得中间点不会移动。

2）我不希望将此应用于滚动视图的内容，因为滚动视图时效果会丢失。相反，我希望将结果应用于父容器。这会有用吗？

这是一张图：

添

Answer 1

只是一个疯狂的猜测，但如何在滚动视图上使用普通图像？图像可以显示“失真”效果，而底层视图则保持不变。

Answer 2

在桌面操作系统X上，可以使用CIFilter上的CALayer。但是根据CALayer documentation：

  

当CALayer类公开此属性时，Core Image在iOS中不可用。目前，此属性的可用过滤器未定义。

您最好的选择是使用OpenGL片段着色器自己实现此功能。棘手的部分是访问您希望实时转换的区域中的视图内容。

我还没有看到任何关于iOS上的实时（滚动）内容的操作。所有类似的动画，如Mail.app垃圾桶动画，页面卷发等，都可以对静态内容进行操作（例如，只渲染一次图像的视图，然后转换该图像）。

目前我看到这种可能性的唯一方法是：

• 以一定间隔将视图区域渲染为图像
• 使用您的opengl着色器进行转换
• 在实际内容的基础上渲染opengl输出。

因为您必须轮询视图，渲染到图像并将其渲染为仅覆盖主屏幕的一部分的OpenGL视图，我期望性能是次优的。

Answer 3

解决方案：

（1）

在scrollview上绘制一个CALayer，不透明度较低，并且会为ScrollView创建圆角效果。

缺点：CALayers的渲染对于这种使用来说太慢了（特别是在旧设备上），在游戏等中使用它并不是很好。你可以切换到UIImages或cocos2d精灵，另一种选择是创建你自己的使用OpenGL的图层类，虽然那个不是那么简单。希望其中一个选项适合你。

（2）

滚动视图后面的内容（在圆角下显示的内容）是纯色还是静态？如果是这样，你应该能够通过在其中心覆盖“角落”图形 - 半透明，并在其滚动视图的角落顶部不透明（使用背景颜色或其他任何东西）来获得更好的性能。在您的内容上合成四张11x11图像的成本将远远低于剪裁它的成本。

缺点：未知：）

（3）

scrollView.layer.cornerRadius = 11;
scrollView.layer.masksToBounds = YES;

这适用于iPhone 4。 缺点：在iPhone 3GS，3G和iPod中无法完美运行。

Answer 4

有趣的想法！从理论上讲，你不能用矩阵“扭曲”你的视图（使用矩阵，它可以只进行线到线的转换。

作为一种解决方法，您可以使用薄视图划分顶部和底部屏幕区域。设置这些视图的垂直比例：8x（例如）最接近屏幕边框1，然后4x，2x ...然后将长滚动视图渲染到一些屏幕外容器中。并将此容器的部分映射到精简视图。我不知道如何使用UIKit API，但它是基于OpenGL的图形的工作解决方案。