How to rotate an image by its bottom center?

Question

I tried to rotate an image by its bottom center by setting the anchorPoint property of the views layer to CGPointMake(0.5, 1).It did rotate based on the bottom center,but the image views bottom center was translated to the image views center position and thus the whole image was translated up by half the height of the image.How to have the image view retain its center but still rotate about its bottom center?

Has anyone ever encountered this issue before?

Hey guys heres a pictorial demonstration of how i want the rotation to work on the images!

enter image description here

This is the original untransformed image! As you can see i have put a red dot to indicate the bottom center of the image.

enter image description here

Here is the rotated image.The image has been rotated clockwise by a few degrees.This has been rotated about by its center which is again not what i want!!

enter image description here

Image obtained after applying tranforms posted in Calebs answer..Note: The transforms were applied on an image view that houses the above vertical image!As you can see the flaws in the rotation the bottom center has gone up and even the rotation was different.It took sort of 180 degree rotation and the whole image translated up by some distance.

To reiterate,I just want the image to rotate like a needle of a clock but about its bottom center

Thank you!

can you post images of how you want it to work, and how it is actually working? (will be easier for everyone to understand) — Nitin Alabur
It may be helpful to create a slider that varies your rotation angle, start it at zero, and then drag the slider to see exactly how the transformation goes off-target. — Peter Hosey

Caleb Caleb · Accepted Answer · 2013-08-19T01:20:31

Assuming that you want to rotate the view in which the image is drawn, the usual way to do it is to compose a transformation matrix from three separate matrices. The first one translates the image left by half its width. The second rotates the view. The third translates the image right by half its width (i.e. it's the inverse of the first). When you put these three together, you get a matrix that rotates the image about its bottom center.

For example, if you have:

CGFloat x = imageWidth/2.0;
CGFloat r = 1.0; // some value in radians;

you can set up a transform like this:

CGAffineTransform t1 = CGAffineTransformMakeTranslation(-x, 0);
CGAffineTransform t2 = CGAffineTransformRotate(t1, r);
CGAffineTransform t3 = CGAffineTransformTranslate(t2, x, 0);

t3 is the final transform that will translate, rotate, and translate back all in one step. If you set t3 as the transform for an image view, you'll find the view rotated by 1.0 radians (or whatever you set r to) about the bottom center.

In addition to correcting my earlier error, Peter Hosey's comment points out that another option is to rotate the layer instead of the view. I don't think this is what you're looking for, but if it is you should know that transformations on a layer take place about it's anchorPoint, which by default is set to the center of its bounds rectangle. To rotate about the bottom center of the bounds rect, you could set the anchor point to the bottom center first, and then apply a rotation transform. (Note that the transform property of a layer is a CATransform3D; if you want to use an affine transform as above, use the setAffineTransform: method.)

How to rotate an image by its bottom center?

1 Answers