Tuesday, October 28, 2008

CGAffineTransform 1.1 - A little more

I mentioned "shear" in the last article, but I didn't show you how to use transformations to shear a view. When you "shear" a rectangle, you turn it into a parallelogram. Apple doesn't provide a function to do this, but you can do so much with transformation matrices beyond what they've given you functions to do. Here is an example of one. The "shear" matrices look like this:

X Shear

| 1 0 0 |
|SHx 1 0 |
| 0 0 1 |


Y Shear

| 1 ShY 0 |
| 0 1 0 |
| 0 0 1 |


So... we can make our own CGAffineTransformShear() functions. Here we go, fasten your seatbelts:

CGAffineTransformMakeShear.h

#import <UIKit/UIKit.h>
#import <CoreGraphics/CoreGraphics.h>

CGAffineTransform CGAffineTransformMakeXShear(CGFloat proportion);
CGAffineTransform CGAffineTransformXShear(CGAffineTransform src, CGFloat proportion);
CGAffineTransform CGAffineTransformMakeYShear(CGFloat proportion);
CGAffineTransform CGAffineTransformYShear(CGAffineTransform src, CGFloat proportion);


CGAffineTransformMakeShear.m

#import "CGAffineTransformShear.h"
CGAffineTransform CGAffineTransformMakeXShear(CGFloat proportion)
{
return CGAffineTransformMake(1.0, 0.0, proportion, 1.0, 0.0, 0.0);
}
CGAffineTransform CGAffineTransformXShear(CGAffineTransform src, CGFloat proportion)
{
return CGAffineTransformConcat(src, CGAffineTransformMakeXShear(proportion));
}
CGAffineTransform CGAffineTransformMakeYShear(CGFloat proportion)
{
return CGAffineTransformMake(1.0, proportion, 0.0, 1.0, 0.0, 0.0);

}
CGAffineTransform CGAffineTransformYShear(CGAffineTransform src, CGFloat proportion)
{
return CGAffineTransformConcat(src, CGAffineTransformMakeYShear(proportion));
}


Now, we can shear a view, even one we create in Interface Builder:

The red and the green parallelograms in the screenshot to the left are just UIViews with a shear transform applied, using the functions above.

Have fun!

Oh, and if you want it - here's the revised Xcode project from the last article using shear.



4 comments:

Simon said...

Thanks for taking the time to put this article together - it's very helpful.

I'm new to affine transforms, do you know if it's possible to create a transform, or series of transforms that translates an arbitrary quadrilateral to another arbitrary quadrilateral?

h4ns said...

What youre saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say.

Arsenal vs Huddersfield Town live streaming
Arsenal vs Huddersfield Town live streaming
Wolverhampton Wanderers vs Stoke City Live Streaming
Wolverhampton Wanderers vs Stoke City Live Streaming
Notts County vs Manchester City Live Streaming
Notts County vs Manchester City Live Streaming
Bologna vs AS Roma Live Streaming
Bologna vs AS Roma Live Streaming
Juventus vs Udinese Live Streaming
Juventus vs Udinese Live Streaming
Napoli vs Sampdoria Live Streaming
Napoli vs Sampdoria Live Streaming
Fulham vs Tottenham Hotspur Live Streaming
Fulham vs Tottenham Hotspur Live Streaming
AS Monaco vs Marseille Live Streaming
AS Monaco vs Marseille Live Streaming
Alajuelense vs Perez Zeledon Live Streaming
Alajuelense vs Perez Zeledon Live Streaming
Technology News | News Today | Live Streaming TV Channels

Taber said...
This comment has been removed by the author.
sudhir prusty said...

Hi,Jeff I am facing some problem when i am scaling the view along x axis and then by rotating the view is skewing.So can u just tell me how i will prevent this skew problem during my rotation.