How to rotate and resize the image view with single finger

Question

I am developing an app which has feature that resizing and rotating the imageview by dragging its bottom right corner button.

I saw one app which has feature that if we drag the bottom right corner button diagonally imageview size had resized or else if we drag the button left or right side direction imageview had rotated as per direction. I wish to implement this feature in my app

I am struggling to implement single finger rotation as well as resizing the imageview.

I could successfully implement resizing the imageview by dragging its bottom right corner button. But I do not have enough knowledge to add rotation to the image view

Please guide me in right way.

I have added the code below for resizing the image view by dragging its right corner.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [[event allTouches] anyObject];

    touchStart = [[touches anyObject] locationInView:imageView];
    isResizingLR = (containerVw.bounds.size.width - touchStart.x < kResizeThumbSize && containerVw.bounds.size.height - touchStart.y < kResizeThumbSize);

}



- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
CGPoint touchPoint = [[touches anyObject] locationInView:imageView];
CGPoint previous=[[touches anyObject]previousLocationInView:imageView];

UITouch *touch = [[event allTouches] anyObject];


float  deltaWidth = touchPoint.x-previous.x;
float  deltaHeight = touchPoint.y-previous.y;


    if (isResizingLR) {
        containerVw.frame = CGRectMake(containerVw.frame.origin.x, containerVw.frame.origin.y,touchPoint.x + deltaWidth, touchPoint.y + deltaWidth); 
        imageView.frame = CGRectMake(imageView.frame.origin.x, imageView.frame.origin.y,touchPoint.x + deltaWidth, touchPoint.y + deltaWidth);                      
        dragIm.frame = CGRectMake(containerVw.frame.size.width-10, containerVw.frame.size.height-10,20,20);


    if (!isResizingLR) {
        containerVw.center = CGPointMake(containerVw.center.x + touchPoint.x touchStart.x,containerVw.center.y + touchPoint.y - touchStart.y);
    }
}

Answer 1

I had hitted the same obstacle as yours, so I developed my own modules ZDStickerView. It would be nice reference.

First of all, be sure your view's autoresizingMask should be flexible.

    autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight

otherwise resizing wouldn't work properly.

Second, I recommends you to use "CGAffineTransformMakeRotation" and "atan2" functions to solve the rotation problem, like this:

    float ang = atan2([recognizer locationInView:self.superview].y - self.center.y,
                      [recognizer locationInView:self.superview].x - self.center.x);
    float angleDiff = deltaAngle - ang;
    self.transform = CGAffineTransformMakeRotation(-angleDiff);

Third, be sure to use relative coordinate, like this:

    self.transform = CGAffineTransformMakeRotation(-angleDiff);