b2cloud

27th September 2011

iOS Distort Transform

Guides | Tutorial By 5 years ago

Transforms in iOS are great, very easy to create and use, as long as you only want to rotate, translate or scale. In a project we completed a while back we needed to distort the text on a switch type button to make it look like the text followed the contour of the button’s edges. We tried rotating but that looked strange when the corners of the text poked out, we needed to keep the left and right edges straight like a parallelogram, we needed a ‘distort’ transform. The CGAffine methods don’t support distorting, so we had to make the transform ourselves. It is actually very easy, just implement these two defines in your project and use them like you would use the scale, rotate or translate functions.

#define CGAffineTransformDistort(t, x, y) (CGAffineTransformConcat(t, CGAffineTransformMake(1, y, x, 1, 0, 0)))
#define CGAffineTransformMakeDistort(x, y) (CGAffineTransformDistort(CGAffineTransformIdentity, x, y))

The x and y values are intensity factors, from -1 to 1. The x value will distort horizontally, and the y will distort vertically.

Examples of use: (notice two sides are always kept straight)

Recommended Posts

7 Tips From Apple's iOS Human Interface Guidelines

Post by 5 years ago

With Appleā€™s iOS Human Interface Guidelines now available on the iBook Store, here some important tips to keep in mind when designing an app.

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!