iOS: transforming a view into cylindrical shape

Question

With Quartz 2D we can transform our views on the x, yand z axis.

In some cases we could even make them look 3D by changing the values of the matrixes.

I was wondering if it could be possible to transform a view into a cylinder shape like in the following picture?

Please ignore the top part of the cylinder. I am more curious to know whether it would be possible warping an UIView around like the side of the cylinder as in the image.

Is that possible only making use of Quartz 2D, layers and transformations (not OpenGL)? If not, is it possible to at least draw it in CGContext to make a view appear like so?

Answer 1

You definitely can't do this with a transform. What you could do is create your UIView off-screen, get the context for the view, get an image from that, and then map the image to a new image, using a non-linear mapping.

So:

1. Create an image context with UIGraphicsBeginImageContext()
2. Render the view there, with view.layer.renderInContext()
3. Get an image of the result with CGBitmapContextCreateImage()
4. Write a mapping function that takes the x/y screen coordinates and maps them to coordinates on the cylinder.
5. Create a new image the size of the screen view, and call the mapping function to copy pixels from the source to the destination.
6. Draw the destination bitmap to the screen.

None of these steps is particularly-difficult, and you might come up with various ways to simplify. For example, you can just render strips of the original view, offsetting the Y coordinate based on the coordinates of a circle, if you are okay with not doing perspective transformations.

If you want the view to actually be interactive, then you'd need to do the transform in the opposite direction when handling touch events.

Answer 2

No you can't bend a view using a transform.

The transform can only manipulate the four corners of the view so no matter what you do it will still be a plane.