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