Distortion of a UIView Part

Question

I have an interesting problem. I hope there is an interesting solution :)

I have a UIScrollView view that takes up the width of the iPad screen. The content of scrollview is obviously wider.

Now I would like to apply the transformation to the visible part (that is, the area of ​​the screen) of the scroll to accurately draw the two ends.

So there are two problems:

1) Is such a conversion possible? Essentially, I want to shift the left and right sides a bit and have the top and bottom edges of the image curved as needed so that the midpoints do not move.

2) I do not want to apply this to the contents of the scroll view, since the effect will be lost when scrolling out of sight. Instead, I want to apply the result to the parent container. Will this work?

Here is the schedule:

Tim

Answer 1

Just a wild hunch, but what about using a regular image on top of your scroll? The image may show a “distortion” effect, while the bottom view will be left untouched.

Answer 2

On the desktop OS X, this is possible using CIFilter on CALayer . However, according to the CALayer documentation :

While the CALayer class provides this property, Core Image is not available on iOS. Currently, undefined filters are available for this property.

It is best to implement this using the OpenGL fragment shader. The hard part is getting access to the content of the view in the region that you want to convert in real time.

I still need to see something that works on live (scrolling) content on iOS. All similar animations, such as Mail.app garbage, can animations, page curls, etc. They work on static content (for example, in a view displayed on an image only once, and then convert that image).

At the moment, I see that this is possible:

• Display the field of view on the image at a certain interval
• Convert using your opengl shader
• Mark the output of opengl on top of the actual content.

Because you will need to poll the view, make the image and display it as an OpenGL view that covers only part of the main screen, I expect performance to be optimal.

Answer 3

Solutions:

(one)

Draw a CALayer on top of the scrollview with less opacity and create a rounded corner effect for the ScrollView.

Cons: CALayers rendering is too slow for this use (especially on older devices), it is not very convenient to use in games, etc. You can switch to UIImages or cocos2d help, another option is to create your own class class with OpenGL, although this is not so simple. Hope one of these options works for you.

(2)

Is the content behind your scroll list (which appears at rounded corners) solid color or otherwise static? If so, you should be able to get better performance by overlaying “angular” graphics — translucent in the center and opaque (with a background color or something else) at the edges - over the corners of your scroll view. The cost of arranging four 11x11 images for your content will be significantly less than with clipping.

Cons: Not known :)

(3)

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

This works great for iPhone 4. Cons: doesn't work great on iPhone 3GS, 3G and iPod.

Answer 4

Interesting idea! Theoretically, you cannot “deform” your view of the matrix (with matrices, you can only do “line to line” conversions.

As a workaround, you can separate the upper and lower areas of the screen with subtle views. Set the vertical scale of these views: 8x (for example) for the screen closest to the border, then 4x, 2x ... Then visualize your long scroll view in some off-screen container. And map the parts of this container to subtle views. I do not know how to do this using the UIKit API, but it is a working solution for graphics based on OpenGL.