Scaling an image drawn on a CGContext from a pinch location

Question

This question is a continuation of another SO request over time: scaling using a pinch, but not using conversion methods . I got the scaling to work almost perfectly, however it will still make the drawn image “jump”, as I called it. The most important parts of the code are as follows:

When a pinch event is observed, this method is called:

[code snippet 1]

- (IBAction)handlePinchGesture:(UIGestureRecognizer *)sender { float previousZoomLevel = zoomLevel; UIPinchGestureRecognizer *pinch = (UIPinchGestureRecognizer *)sender; float zoomIncreaseFactor = [self getZoomFactor:[pinch scale]]; //= 13 or 7 or 10 float estimatedDelta = (previousZoomLevel * zoomIncreaseFactor) / 150; if ([pinch scale] > previousScale) { zoomLevel += estimatedDelta; } if ([pinch scale] < previousScale) { zoomLevel -= estimatedDelta; } previousScale = [pinch scale]; if (zoomLevel < MIN_ZOOM_LEVEL) { zoomLevel = MIN_ZOOM_LEVEL; } if (zoomLevel > MAX_ZOOM_LEVEL) { zoomLevel = MAX_ZOOM_LEVEL; } CGPoint loc = [pinch locationInView:self]; NSLog(@"loc: {%.1f,%.1f}, lastPinchLoc: {%.1f,%.1f}", loc.x,loc.y,lastPinchLocation.x,lastPinchLocation.y); //uncomment the below part to always zoom from the first zoom location. //if (lastPinchLocation.x != 0 && lastPinchLocation.y != 0) { //loc.x += lastPinchLocation.x - loc.x; //loc.y += lastPinchLocation.y - loc.y; //} //NSLog(@"newLastPinchLocation: {%.1f,%.1f}", loc.x,loc.y); lastPinchLocation = loc; hasBeenMoved = YES; if (zoomLevel != previousZoomLevel) { [self setNeedsDisplay]; } } 

The above NSLog gives the following prints when I pinch across the screen:

 2012-10-16 10:15:19.357 App[2609:907] loc: {147.0,232.0}, lastPinchLoc: {0.0,0.0} 2012-10-16 10:15:19.391 App[2609:907] loc: {147.0,231.0}, lastPinchLoc: {147.0,232.0} 2012-10-16 10:15:19.436 App[2609:907] loc: {148.0,232.0}, lastPinchLoc: {147.0,231.0} 2012-10-16 10:15:19.457 App[2609:907] loc: {148.0,232.0}, lastPinchLoc: {148.0,232.0} 2012-10-16 10:15:19.474 App[2609:907] loc: {148.0,233.0}, lastPinchLoc: {148.0,232.0} 2012-10-16 10:15:19.507 App[2609:907] loc: {147.0,233.0}, lastPinchLoc: {148.0,233.0} 2012-10-16 10:15:19.573 App[2609:907] loc: {103.0,355.0}, lastPinchLoc: {147.0,233.0} 2012-10-16 10:15:20.324 App[2609:907] loc: {585.0,710.0}, lastPinchLoc: {103.0,355.0} 2012-10-16 10:15:20.340 App[2609:907] loc: {584.0,709.0}, lastPinchLoc: {585.0,710.0} 2012-10-16 10:15:20.356 App[2609:907] loc: {584.0,710.0}, lastPinchLoc: {584.0,709.0} 2012-10-16 10:15:20.374 App[2609:907] loc: {584.0,710.0}, lastPinchLoc: {584.0,710.0} 2012-10-16 10:15:20.407 App[2609:907] loc: {583.0,710.0}, lastPinchLoc: {584.0,710.0} 2012-10-16 10:15:20.456 App[2609:907] loc: {512.0,811.0}, lastPinchLoc: {583.0,710.0} 2012-10-16 10:15:21.056 App[2609:907] loc: {645.0,163.0}, lastPinchLoc: {512.0,811.0} 2012-10-16 10:15:21.090 App[2609:907] loc: {647.0,164.0}, lastPinchLoc: {645.0,163.0} 2012-10-16 10:15:21.107 App[2609:907] loc: {647.0,165.0}, lastPinchLoc: {647.0,164.0} 2012-10-16 10:15:21.156 App[2609:907] loc: {602.0,249.0}, lastPinchLoc: {647.0,165.0} 2012-10-16 10:15:21.839 App[2609:907] loc: {153.0,702.0}, lastPinchLoc: {602.0,249.0} 2012-10-16 10:15:21.856 App[2609:907] loc: {157.0,703.0}, lastPinchLoc: {153.0,702.0} 2012-10-16 10:15:21.874 App[2609:907] loc: {159.0,704.0}, lastPinchLoc: {157.0,703.0} 2012-10-16 10:15:21.890 App[2609:907] loc: {160.0,704.0}, lastPinchLoc: {159.0,704.0} 2012-10-16 10:15:21.906 App[2609:907] loc: {123.0,796.0}, lastPinchLoc: {160.0,704.0} 2012-10-16 10:15:21.923 App[2609:907] loc: {125.0,794.0}, lastPinchLoc: {123.0,796.0} 2012-10-16 10:15:22.706 App[2609:907] loc: {368.0,303.0}, lastPinchLoc: {125.0,794.0} 2012-10-16 10:15:22.723 App[2609:907] loc: {369.0,307.0}, lastPinchLoc: {368.0,303.0} 2012-10-16 10:15:22.725 App[2609:907] loc: {369.0,307.0}, lastPinchLoc: {369.0,307.0} 2012-10-16 10:15:22.739 App[2609:907] loc: {371.0,312.0}, lastPinchLoc: {369.0,307.0} 2012-10-16 10:15:22.756 App[2609:907] loc: {374.0,312.0}, lastPinchLoc: {371.0,312.0} 2012-10-16 10:15:22.773 App[2609:907] loc: {338.0,392.0}, lastPinchLoc: {374.0,312.0} 

Before drawing an element in CGContext, x and y are placed in this method, and I draw the element in the return location. The class variable "zoomTouchLocation" has the same meaning as the "lastPinchLocation" in the above snippet.

[code snippet 2]

 - (CGPoint)handleCoordinatesX:(float)xy:(float)y { x -= zoomTouchLocation.x; y -= zoomTouchLocation.y; x = x * zoomLevel; y = y * zoomLevel; x += zoomTouchLocation.x; y += zoomTouchLocation.y; return CGPointMake(x, y); } 

If I clamp about the same place every time it works as intended, but when I clamp across the screen, the image jumps like crazy.

Now, basically, my question is, can someone help me with this problem to “jump” and get the image in scale from the location where I zoomed in without jumping. If you need more information, just ask in the comments below.

(and I know that it’s quite normal that jumps occur with my code as it is, I just can’t find a way to stop it from doing this)

Answer 1

It is hard to help without all the code, but you should try to install view.layer.anchorPoint on your pinchLocation (if not already done). Similarly, when the transformation is completed, this point does not move. Really useful for rotation or scaling.

Answer 2

Divisions and scaling coordinates should be monitored and / or reset during discrete events. That is, you need to know and use UIPinchGestureRecognizer.state to determine where your tracking logic and delta should be reset, and when to update the coordinates that you are tracking for your zoom position.

---

One basic illustration of this comes from the Touches example:

 - (void)scalePiece:(UIPinchGestureRecognizer *)gestureRecognizer { [self adjustAnchorPointForGestureRecognizer:gestureRecognizer]; if ([gestureRecognizer state] == UIGestureRecognizerStateBegan || [gestureRecognizer state] == UIGestureRecognizerStateChanged) { [gestureRecognizer view].transform = CGAffineTransformScale([[gestureRecognizer view] transform], [gestureRecognizer scale], [gestureRecognizer scale]); [gestureRecognizer setScale:1]; } }