thavasidurai
thavasidurai

Reputation: 2002

How to rotate and resize the image view with single finger

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);
    }
}

enter image description here

Upvotes: 5

Views: 7428

Answers (3)

Aimul khattak
Aimul khattak

Reputation: 1

This might help, https://github.com/zedoul/ZDStickerView.

IQStickerView with OneFingerRotation, Scale, Resize and Close feature.

Features:

  1. One Finger Rotation Scale.
  2. One Finger Resize.
  3. Enable/Desable Rotation, Scale, Resize with properties.
  4. Auto manage Multiple IQStickerView.
  5. Can work with UIScrollView also.
  6. Fast Responsiveness.

Upvotes: -1

Kim
Kim

Reputation: 1918

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);

Upvotes: 10

thavasidurai
thavasidurai

Reputation: 2002

I have fixed this issue and uploaded this control in cocoacontrols

http://www.cocoacontrols.com/controls/tdresizerview

And sample code

https://www.dropbox.com/s/yb0vzy0wao52bgt/SampeResizeView.zip

Updated answer

https://www.cocoacontrols.com/controls/zdstickerview

Upvotes: 5

Related Questions