Pan gesture behaving weird after default rotation and scale

Question

I am currently designing a little game as a learning project and it is basically the following, a image is rotated and scaled on viewDidLoad and another image is a direct copy of the original image.

So basically there is a image that is a little bit different from the other, the objective is to scale it back down, rotate it and move it on top of the other image with 5 pixels, 5 degrees of rotate and 5 percent scale.

I have run into an issue. I "skew" the image using the following code...

CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI/2.5);
image.transform = CGAffineTransformScale(transform, 1.25, 1.25);

My pan gesture does not perform correctly after rotating the image and then scaling it 125%.

Does anyone know what could be going on here? By incorrectly I mean that it doesn't move around with my finger.. It seems to glide or go the opposite direction. Video .

My pan gesture method is below.

if (gesture.state == UIGestureRecognizerStateBegan || gesture.state == UIGestureRecognizerStateChanged) {
        CGPoint translation = [gesture translationInView:image];
        //if within game field
        if((image.center.x + translation.x) > 50.0 && (image.center.x + translation.x) < 255.0 && (image.center.y + translation.y) > 50.0 && (image.center.y + translation.y) < 302) {
            [image setCenter:CGPointMake([image center].x + translation.x, [image center].y + translation.y)]; //move it
        }
    }
    [gesture setTranslation:CGPointZero inView:[image superview]];
    if(gesture.state == UIGestureRecognizerStateEnded) [self didWin]; // not relevant to question

Does anyone know why pan performs incorrectly after I rotate and scale my image? When I comment out those first two lines of code the pan performs correctly and moves around with the users finger.

Thanks in advance for any suggestions or help!

Answer 1

The solution was to change the pan code just a tiny bit..

if (gesture.state == UIGestureRecognizerStateBegan || gesture.state == UIGestureRecognizerStateChanged) {
        CGPoint translation = [gesture translationInView:self.view]; //CHANGED
        //if within game field
        if((image.center.x + translation.x) > 50.0 && (image.center.x + translation.x) < 255.0 && (image.center.y + translation.y) > 50.0 && (image.center.y + translation.y) < 302) {
            [image setCenter:CGPointMake([image center].x + translation.x, [image center].y + translation.y)]; //move it
        }
    }
    [gesture setTranslation:CGPointZero inView:self.view];

I changed in view:self.view and translationInView:self.view];

Answer 2

Rotation might have changed the frame. I used cosf and sinf function to deal with it.

handlePan and handleRotate are the callback functions, in which I can control the subview of self.view. Here, you should replace image with your own view.

static CGFloat _rotation = 0;

- (void)handlePan:(UIPanGestureRecognizer*)recognizer
{
    UIImageView *image = nil;
    for (UIImageView *tmp in recognizer.view.subviews) { // pick the subview
        if (tmp.tag == AXIS_TAG) {
            image = tmp;
        }
    }
    CGPoint translation = [recognizer translationInView:image];

    // I have found any related documents yet, but these equations do work!//////
    CGFloat dx = translation.x * cosf(_rotation) - translation.y*sinf(_rotation);
    CGFloat dy = translation.x * sinf(_rotation) + translation.y*cosf(_rotation);
    /////////////////////////////////////////////////////////////////////////////

    image.center = CGPointMake(image.center.x+dx, dy+image.center.y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:image];
}

- (void)handleRotate:(UIRotationGestureRecognizer*)recognizer
{
    UIImageView *image = nil;
    for (UIImageView *tmp in recognizer.view.subviews) { // pick the subview
        if (tmp.tag == AXIS_TAG) {
            image = tmp;
        }
    }
    CGFloat r = [recognizer rotation];
    if ((recognizer.state == UIGestureRecognizerStateBegan || recognizer.state == UIGestureRecognizerStateChanged) 
        && recognizer.numberOfTouches == 2) {
        image.transform = CGAffineTransformMakeRotation(_rotation+r);
    } else if (recognizer.state == UIGestureRecognizerStateEnded) {
        _rotation+=r; // Record the final rotation
    }
}