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

Hey Siri, how do I start a conversation with someone with a disability?

Post by 5 years ago

We all love Siri’s little witty quips, but I recently read a heartwarming article over on Mashable that reflects the power of technology to change lives in ways that most of us would never appreciate. I won’t spoil

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!