扭曲 UIView 的一部分答案

【问题标题】：Distorting part of a UIView扭曲 UIView 的一部分
【发布时间】：2012-02-20 07:39:44
【问题描述】：

我有一个有趣的问题。希望有一个有趣的解决方案:)

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

现在，我想对滚动视图的可见部分（即屏幕区域）应用一个变换，使两端轻轻弯曲。

因此，有两个问题：

1) 这样的转变是否可能？本质上，我想将左侧和右侧向上移动一点，并根据需要弯曲视图的顶部和底部边缘，以使中间点不会移动。

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

这是一个图形：

提姆

【问题讨论】：

肯定有人可以帮忙吗？
您能否提供某种图形来显示您要查找的内容？我已经阅读了几次，我不确定我是否理解你所说的两个“问题”或目标。（并且滚动视图的内容比屏幕的宽度更宽并不明显。）重申你的目标可能会得到更多的关注。但是图形也会有很大帮助。
嗨。也许这会有所帮助：想象一下滚动视图包含一条长的水平晾衣绳。我希望线条在滚动视图框架定义的可见窗口的末端向上弯曲。滚动时，您将始终看到应用于可见区域的相同曲率。
@tarmes，仍然没有你想要的具体形象。也许张贴模型图像将极大地帮助我们了解您的需求。而且您也更有可能更快地解决您的问题。

标签： iphone ios ipad graphics transform

【解决方案1】：

只是一个疯狂的猜测，但是在滚动视图顶部使用普通图像怎么样？图像可能会显示“扭曲”效果，而底层视图将保持不变。

【讨论】：

嗨。问题是我想看到滚动视图在滚动时应用到内容的失真。更大的问题是我不知道如何设置我所描述的类型的失真。
或者更好的是把图片放在滚动视图后面。
你可以使用滚动视图委托方法的减速并手动做动画吗？你必须以某种方式欺骗它......

【解决方案2】：

在桌面 OS X 上，这可以在 CIFilter 上使用 CALayer 。不过根据CALayer documentation：

虽然 CALayer 类公开了这个属性，但 Core Image 在 iOS 中不可用。目前，该属性可用的过滤器未定义。

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

我还没有看到任何在 iOS 上的实时（滚动）内容上运行的东西。所有类似的动画，如 Mail.app 垃圾箱动画、页面卷曲等，都在静态内容上运行（例如，一个视图只渲染一次图像，然后转换该图像）。

目前我认为这可能的唯一方法是：

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

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

【讨论】：

嗯，如果能提供简化的解决方案，我很乐意预渲染滚动视图的全部内容。但是，我对 OpenGL 一无所知。您能否提供或指出任何可以执行我所描述的失真类型的代码？
使用预渲染的内容实际上会有所帮助。您必须将滚动与 opengl 动画同步，但使用 UIScrollView 的 scrollViewDidScroll 委托方法会很容易。至于实际的变换，看看现有的 OpenGL/着色器项目，它们试图模仿页面卷曲。 PaperStrack 是一个开源示例：api.mutado.com/mobile/paperstack。该页面还链接到网格变形和 OpenGL ES 页面。
其实从iOS5开始就有Core Image了。
@c.cam108 - 正确，CIFilter 在 iOS 5 上可用。但您还不能将它们应用于图层内容。也无法创建自定义 CIFilter（根据需要实现此效果）。

【解决方案3】：

解决方案：

(1)

在滚动视图的顶部绘制一个不透明度较低的 CALayer，这将为滚动视图创建圆角效果。

缺点：CALayers 的渲染太慢了（尤其是在旧设备上），在游戏等中使用不是很好。你可以切换到 UIImages 或 cocos2d sprites，另一种选择是创建你自己的带有 OpenGL 的图层类，虽然那不是那么简单。希望其中一个选项对您有用。

(2)

滚动视图后面的内容（圆角下显示的内容）是纯色还是静态的？如果是这样，你应该能够通过在滚动视图的角上覆盖“角”图形——在它们的中心是半透明的，在它们的边缘是不透明的（用你的背景颜色或其他什么）来获得更好的性能。在您的内容上合成四个 11x11 图像的成本将大大低于剪辑它的成本。

缺点：未知:)

(3)

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

这对 iPhone 4 非常适用。缺点：不能在 iPhone 3GS、3G 和 iPod 上完美运行。

【讨论】：

嗨 - 我根本不是在寻找圆角效果:(

【解决方案4】：

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

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

【讨论】：