How to get rotated image of imageview in uiview?

Question

I created RotatedView subclass of UIView and added UIImageView as subview of RotatedView and also draw a image on RotatedView using drawRect: method same as image of imageView. I applied pinch and rotate gestures on imageView. When i pinch the imageView drawing image is also changed. But when i rotate the imageView, the drawing image is not changed. I used following code::

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor redColor];
        imageView = [[UIImageView alloc] initWithFrame:CGRectMake(80, 150, 100, 150)];
        imageView.image = [UIImage imageNamed:@"Images_6.jpg"];
        imageView.userInteractionEnabled = YES;
        [self addSubview:imageView];

        UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotationMethod:)];
        rotationGesture.delegate = self;
        [imageView addGestureRecognizer:rotationGesture];



    }
    return self;
}



- (void)drawRect:(CGRect)rect
{
    // Drawing code
    CGContextRef context =UIGraphicsGetCurrentContext();
    CGRect rectFrame = CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
     CGContextSetLineWidth(context, 10.0);
    CGContextBeginPath(context);

    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 90, 0);
    CGContextAddLineToPoint(context, 90, 90);

    CGContextAddLineToPoint(context, 0, 90);

    CGContextAddLineToPoint(context, 0, 0);



    CGContextClip(context);


    CGContextStrokePath(context);
    CGContextDrawImage(context,rectFrame, imageView.image.CGImage);
}

-(void)rotationMethod:(UIRotationGestureRecognizer *)gestureRecognizer{
    NSLog(@"rotationMethod");
    if ([gestureRecognizer state]==UIGestureRecognizerStateBegan || [gestureRecognizer state]==UIGestureRecognizerStateChanged) {
        CGAffineTransform transform = CGAffineTransformRotate(gestureRecognizer.view.transform, gestureRecognizer.rotation);
        gestureRecognizer.view.transform = transform;
         [gestureRecognizer setRotation:0];

    }
    [self setNeedsDisplay];
}

How do i get rotate image in UIView when the imageView is rotated?

**

Edited:

**

I got solution using first method. Now i am using second method. I think this is simple and best but I am not sure which one is best. In second method, image is rotated but not at center point. I am struggle to solve this problem. Please help me.

Modifying methods are:

- (void)drawRect:(CGRect)rect
{
    NSLog(@"drawRect");
    // Drawing code
    CGContextRef context =UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
     CGContextSetLineWidth(context, 10.0);
    CGContextBeginPath(context);

    CGContextMoveToPoint(context, imageRect.origin.x, imageRect.origin.y);
    CGContextAddLineToPoint(context, imageRect.size.width, imageRect.origin.y);
    CGContextAddLineToPoint(context, imageRect.size.width, imageRect.size.height);

    CGContextAddLineToPoint(context, imageRect.origin.x, imageRect.size.height);

    CGContextAddLineToPoint(context, imageRect.origin.x, imageRect.origin.y);

    CGContextClip(context);


    CGContextStrokePath(context);
    CGContextDrawImage(context, imageRect, [self rotateImage:imageView.image].CGImage);


}
-(void)rotationMethod:(UIRotationGestureRecognizer *)gestureRecognizer{
    NSLog(@"rotationMethod");
    if ([gestureRecognizer state]==UIGestureRecognizerStateBegan || [gestureRecognizer state]==UIGestureRecognizerStateChanged) {
        CGAffineTransform transform = CGAffineTransformRotate(gestureRecognizer.view.transform, gestureRecognizer.rotation);

        gestureRecognizer.view.transform = transform;
        lastRotation = gestureRecognizer.rotation;       
         [gestureRecognizer setRotation:0];

    }
    [self setNeedsDisplay];
}
- (UIImage *)rotateImage:(UIImage *) img
{
    NSLog(@"rotateImage");

    CGAffineTransform transform = imageView.transform;
    transform = CGAffineTransformTranslate(transform, img.size.width, img.size.height);
    transform = CGAffineTransformRotate(transform, lastRotation);
    transform = CGAffineTransformScale(transform, -1, -1);

    CGContextRef ctx = CGBitmapContextCreate(NULL, img.size.width, img.size.height,
                                             CGImageGetBitsPerComponent(img.CGImage), 0,
                                             CGImageGetColorSpace(img.CGImage),
                                             CGImageGetBitmapInfo(img.CGImage));
    CGContextConcatCTM(ctx, transform);
    CGContextDrawImage(ctx, CGRectMake(20,20,img.size.width,img.size.height), img.CGImage);

    CGImageRef cgimg = CGBitmapContextCreateImage(ctx);
    UIImage *newImg = [UIImage imageWithCGImage:cgimg];
    CGContextRelease(ctx);
    CGImageRelease(cgimg);
    return newImg;


}

@Prince: I used it but i am not getting answer and also it is rotating reverse order. — Prasad G, May 02 '13 at 06:31
Umm.. Let me understand the problem: Your `UIImageView` changes appropriately when you pinch and rotate, but the `UIView`, that you want to be exactly the same dimensions and rotation as your image view, doesn't update? You are not taking image view's rotation into account anywhere in `drawRect:`, why do you expect it to work? Also, you shouldn't be using UIImageView's frame property: `Warning: If the transform property is not the identity transform, the value of this property is undefined and therefore should be ignored`. — maroux, May 02 '13 at 09:31

score 1 · Answer 1 · answered May 02 '13 at 09:36

1

You need to use CGContextScaleCTM and CGContextRotateCTM (and possibly to appropriately transform your CGContextRef to match your UIImageView's transform.

Take a look at the Quartz 2D Programming Guide

answered May 02 '13 at 09:36

maroux

3,764
3
23
32

Thank you for reply. I used these cases but i didn't get. – Prasad G May 02 '13 at 09:37
Sorry for late replay. I used CGContextScaleCTM,CGContextRotateCTM on that time i didn't get it so i used another way the i got solution. Now i am trying to solve this problem using these methods. I have edited my code. Please see this. – Prasad G May 22 '13 at 05:28

score 1 · Accepted Answer · answered May 04 '13 at 05:19

Ok. Finally i got it using ANImageBitmapRep. I declared lastRotation, angle,rotateMe in RotatedView.h class.

    -(void)rotationMethod:(UIRotationGestureRecognizer *)gestureRecognizer{

           if ([gestureRecognizer state]==UIGestureRecognizerStateBegan) {
               if (!rotateMe) {
                    rotateMe = [[ANImageBitmapRep alloc] initWithImage:displayImageView.image];
               }else{
                    rotateMe =[ANImageBitmapRep imageBitmapRepWithImage:displayImageView.image];
               }



        }
        CGFloat rotation = 0.0 - (lastRotation - [gestureRecognizer rotation]);

        CGAffineTransform currentTransform = [gestureRecognizer view].transform;
        CGAffineTransform newTransform = CGAffineTransformRotate(currentTransform,rotation);

        [[gestureRecognizer view] setTransform:newTransform];

        lastRotation = [gestureRecognizer rotation];
        angle =lastRotation * (180 / M_PI);

        [self setNeedsDisplay];
    }

 - (void)drawRect:(CGRect)rect
  {
            CGRect imageRect = CGRectMake(0, 0, 90, 90);
            // Drawing code
            CGContextRef context =UIGraphicsGetCurrentContext();
            CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
             CGContextSetLineWidth(context, 10.0);
            CGContextBeginPath(context);

            CGContextMoveToPoint(context, imageRect.origin.x, imageRect.origin.y);
            CGContextAddLineToPoint(context, imageRect.size.width, imageRect.origin.y);
            CGContextAddLineToPoint(context, imageRect.size.width, imageRect.size.height);

            CGContextAddLineToPoint(context, imageRect.origin.x, imageRect.size.height);

            CGContextAddLineToPoint(context, imageRect.origin.x, imageRect.origin.y);

            CGContextClip(context);


            CGContextStrokePath(context);

            UIImage  *rotatedImage1=[UIImage imageWithCGImage:[rotateMe imageByRotating:angle]];
            CGContextDrawImage(context, imageRect, rotatedImage1.CGImage);

 }

I find this solution. If anyone find best solution, give me suggestions according this problem.

How to get rotated image of imageview in uiview?

Edited:

2 Answers2