Question

I have an Image inside UIScrollView which i can zoom in and out.
I have a button that let the user rotate the Image 90 degrees:

(void)RotateImage {
    CGAffineTransform rotateTrans = CGAffineTransformMakeRotation(-90.0 / 180.0 * 3.14);
    BaseImg.transform = rotateTrans;
}

After the imaged is rotated i cannot zoom in and out.. the image is going crazy on the screen and going back to the UNRotated state.

What am i doing wrong? code examples will be great!
Thanks 🙂

Answer 1

UIScrollView likes to take over the transforms of the views it contains. There are two solutions:

1. Rotate the image without changing the containing view.
2. Create a UIView subclass that displays an image within a sublayer.

To rotate the image, see How to Rotate a UIImage 90 degrees?. If you’re always and only doing 90 degree rotation, see @Peter Sarnowski’s solution. To adapt it to what you’re doing here, assuming that BaseImg is a UIImageView:

- (void) rotateImage
{
    UIImage *sourceImage = [baseImg image];
    UIImage *rotatedImage = [UIImage imageWithCGImage:[sourceImage CGImage] scale:1.0 orientation:UIImageOrientationRight];
    [baseImg setImage:rotatedImage];
}

This will only rotate once. To have rotateImage work repeatedly, read the existing orientation property and move it on to the next in clockwise or anticlockwise order.

If the image is not square, you may also need to resize baseImg to reflect its new aspect ratio.

To create a UIView subclass, you need to have it store a CALayer as a sublayer of the view layer. Store the image in the sublayer, and transform the sublayer at will. This is faster, and allows arbitrary rotation, but you need to calculate your own scaling to prevent the rotate image going outside the view bounds.