旋转UIImageView将图像移出屏幕

Question

I have a simple rotation gesture implemented in my code, but the problem is when I rotate the image it goes off the screen/out of the view always to the right.

The image view that is being rotated center X gets off or increases (hence it going right off the screen out of the view).

I would like it to rotate around the current center, but it's changing for some reason. Any ideas what is causing this?

Code Below:

- (void)viewDidLoad
{
    [super viewDidLoad];

    CALayer *l = [self.viewCase layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:30.0];

    self.imgUserPhoto.userInteractionEnabled = YES;
    [self.imgUserPhoto setClipsToBounds:NO];

    UIRotationGestureRecognizer *rotationRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotationDetected:)];
    [self.view addGestureRecognizer:rotationRecognizer];

    rotationRecognizer.delegate = self;
}

- (void)rotationDetected:(UIRotationGestureRecognizer *)rotationRecognizer
{
    CGFloat angle = rotationRecognizer.rotation;
    self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, angle);
    rotationRecognizer.rotation = 0.0;
}

Answer 1

You want to rotate the image around it's center, but that's not what it is actually happening. Rotation transforms take place around the origin. So what you have to do is to apply a translate transform first to map the origin to the center of the image, and then apply the rotation transform, like so:

self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, self.imageView.bounds.size.width/2, self.imageView.bounds.size.height/2);

Please note that after rotating you'll probably have to undo the translate transform in order to correctly draw the image.

Hope this helps

Edit:

To quickly answer your question, what you have to do to undo the Translate Transform is to subtract the same difference you add to it in the first place, for example:

// The next line will add a translate transform
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 10, 10);
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, radians);
// The next line will undo the translate transform
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -10, -10);

However, after creating this quick project I realized that when you apply a rotation transform using UIKit (like the way you're apparently doing it) the rotation actually takes place around the center. It is only when using CoreGraphics that the rotation happens around the origin. So now I'm not sure why your image goes off the screen. Anyway, take a look at the project and see if any code there helps you.

Let me know if you have any more questions.

The 'Firefox' image is drawn using UIKit. The blue rect is drawn using CoreGraphics

Answer 2

You aren't rotating the image around its centre. You'll need correct this manually by translating it back to the correct position