0

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;
}
Robert Swilley
  • 493
  • 5
  • 11
  • If you want to rotate around the image's center, you need to make sure that your image's center matches with co-ordinate system's origin. Coordinate system for a view has its origin in top left corner. So to start with you need to translate the image to origin, rotate it and then move it back to its original center. I haven't written this kind of code in iOS before so do not know exact semantics, but I am very sure that's what your problem is. – zambrey Jun 14 '13 at 20:29
  • You should just search for Rotating image around an arbitrary point in iOS. There seems to be a ton of stuff on SO as well as other blogs about this. – zambrey Jun 14 '13 at 20:34
  • this might help: http://stackoverflow.com/a/5983173/210171 "Rotating an image context (CGContextRotateCTM) causing it to become blank. Why?" – nielsbot Jun 14 '13 at 21:45

2 Answers2

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 The 'Firefox' image is drawn using UIKit. The blue rect is drawn using CoreGraphics

LuisCien
  • 6,362
  • 4
  • 34
  • 42
0

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

Ben Davis
  • 226
  • 2
  • 4
  • 11