iOS Distort Transform

Guides | Tutorial By 6 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)