Distorting UIImage into Parallelogram

Question

I have a UIImage that results from a function. It's something like the following.

image1.image = [self reflectedImage:img];

where image1 is a UIImage control. Before plugging it into image1, I want to further distort it to the right or left a little into a parallelogram as shown below. So I just want to relocate point c and d.

I've read several dozen articles here and there. I'm not sure if I can do it with CGAffineTransformMake. This web page suggests that I could. Unfortunately, there is no sample project to see how it works. Unfortunately, I haven't found a single web site that shows me how to distort a simple rectangle image into a parallelogram. So what is the easiest way of doing it? Do I need to create a layer so that I can use CATransform3D?

Thank you for your help.

Answer 1

What you have to do is give your UIImageView some perspective. By default a layers transform do not have perspective, so you must also setup this: transform.m34 = 1.0 / -2000;

Also change the anchorpoint of your view so that it rotates along the top edge of the view. For you it becomes (0,0.5).

The perspective gives it that parallelogram look as if the view has depth (its also called 2.5D as its not pure 3D animation, its pseudo 3D). Set the anchor point so that it rotates along that edge and finally give it an angle. i.e. rotate by how much?

// Rotate by 30 degrees
CGAffineTransform rotationTransform = CGAffineTransformIdentity;
rotationTransform = CGAffineTransformRotate(rotationTransform, DegreesToRadians(30));
swingView.transform = rotationTransform;

all of this will give you what you want...

Answer 2

I found out an alternative way which is way simpler than the other in this topic. Just apply this transformation to your view:

imgView.transform = CGAffineTransformMake(1.0, 0.0, proportion, 1.0, 0.0, 0.0);

where proportion is between -1 and 1

This is called a shear transformation, look at the link below for more

http://iphonedevelopment.blogspot.it/2008/10/cgaffinetransform-11-little-more.html