Zoom UIImageView from center of two fingers and also with button click

Question

I have a image view and want to add some custom pinch gesture recognizers. I'm able to zoom my image view, but the problem is, it is not zooming in from the center of the two fingers.

How can I zoom from center of the two fingers? This is what I'm currently doing (in viewDidLoad)

UIPinchGestureRecognizer* pinchRecognizer = 
    [[UIPinchGestureRecognizer alloc] initWithTarget:self
                                              action:@selector(handlePinch:)];    
 [imageView addGestureRecognizer:pinchRecognizer];

here is the code for pinch method

- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer
{  

    recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
    recognizer.scale = 1;

}

Thanx for the rep guys...now here i'm updating my question.. i want to zoom image on button click..What i'm doing is

-(IBAction)Zoom_image:(id)sender {

 CGFloat scaleValue = 2;

 CGAffineTransform transform = GAffineTransformMakeScale(scaleValue,scaleValue);

 self.backgroundImgView.transform = transform;

}

Please provide us with the actual implementation for the `pinch:` method. The code where you add the gesture recognizer is irrelevant. — David Rönnqvist, Apr 23 '13 at 10:05
Please include the code from your comment into original question. Use *edit* link. — Martin Prikryl, Apr 23 '13 at 10:19

score 5 · Accepted Answer · answered Apr 23 '13 at 15:18

5

This will also work. Just move the image to the center of the pinch, scale it and then back to its position in just one transform.

- (void) pinch:(UIPinchGestureRecognizer *) recognizer {

    CGPoint anchor = [recognizer locationInView:imageToScale];
    anchor = CGPointMake(anchor.x - imageToScale.bounds.size.width/2, anchor.y-imageToScale.bounds.size.height/2);

    CGAffineTransform affineMatrix = imageToScale.transform;
    affineMatrix = CGAffineTransformTranslate(affineMatrix, anchor.x, anchor.y);
    affineMatrix = CGAffineTransformScale(affineMatrix, [recognizer scale], [recognizer scale]);
    affineMatrix = CGAffineTransformTranslate(affineMatrix, -anchor.x, -anchor.y);
    imageToScale.transform = affineMatrix;

    [recognizer setScale:1];
}

answered Apr 23 '13 at 15:18

Odrakir

4,254
1
20
52

thanx for the reply...that adjustAnchorPointForGestureRecognizer helped...to get the proper zooming effect..thanx a lot Odrakir...now the problem is, i want to zoom the image by button click(from the center of the image) is that posible with pinch gesture recognizer?? what i'm doing is updated in question...this zooming is killing me now... – AJ Tech Apr 25 '13 at 08:47
I don't understand what you mean by "zoom the image by button click". – Odrakir Apr 25 '13 at 08:55
Actually right now i'm zooming the imageview with two fingers, the same functionality i want with button click( means after button click, i want to zoom image view with specific center). i'm successful in zooming with above code, but i want to zoom image with with specified center after button click – AJ Tech Apr 25 '13 at 09:06
You just have to set the anchor to the specific center instead of locationInView and set the scale to whatever you want to scale to, instead of [recognizer scale] and that's it. – Odrakir Apr 25 '13 at 09:09
there is on problem...using view.transform resizes my subviews as well... Is there a way to prevent that? – AJ Tech Apr 26 '13 at 02:38
Of course it does that. Transforms are applied to the view and everything it contains. You could try to apply the inverse transformation to the subview. – Odrakir Apr 26 '13 at 08:42

score 0 · Answer 2 · answered Apr 23 '13 at 14:52

The problem is that all you are doing is scaling the view.

You make no attempt to translate the zoom to be centered about the center of the two finger points.

So grab the the two finger points. Work out their center and add a translate.

Note that the code below will show in principle what you need to do, I can guarantee that it will need to be fixed as Affine Transforms in practise are not trivial and im not your bug fixer.

- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer
{
    UIView *view = recognizer.view;

    CGRect frame = view.bounds;

    //you may wish to get more accurate by querying and calculating against the touches via 
    //- (NSUInteger)numberOfTouches;
    //- (CGPoint)locationOfTouch:(NSUInteger)touchIndex inView:(UIView*)view;
    CGPoint nominalCenter = [recognizer locationInView:view];

    CGFloat deltaFromCenterX = CGRectGetMidX(frame) - nominalCenter.x;

    CGFloat deltaFromCenterY = CGRectGetMidY(frame) - nominalCenter.y;

    currentScale = currentScale * recognizer.scale;

    CGAffineTransform scale = CGAffineTransformMakeScale(currentScale, currentScale);

    CGAffineTransform translate = CGAffineTransformMakeTranslation(deltaFromCenterX, deltaFromCenterY);

    //possibly its going to be scale then translate instead
    CGAffineTransform final = CGAffineTransformConcat(translate, scale);

    recognizer.view.transform = final;
    recognizer.scale = 1;
}

Zoom UIImageView from center of two fingers and also with button click

2 Answers2