CGContext-缩放，然后在点处裁剪图像

Question

Similar to Instagram I have a square crop view (UIScrollView) that has a UIImageView inside it. So the user can drag a portrait or landscape image inside the square rect (equal to the width of the screen) and then the image should be cropped at the scroll offset. The UIImageView is set to aspect fit. The UIScrollView content size is set to a scale factor for either landscape or portrait, so that it correctly renders with aspect fit ratio.

When the user is done dragging I want to scale the image up based on a given size, let's say 1000x1000px square and then crop it at the scroll offset (using [UIImage drawAtPoint:CGPoint].

The problem is I can't get the math right to get the right offset point. If I get it close on a 6+ it will be way off on a 4S.

Here's my code for the scale and crop:

(UIImage *)squareImageFromImage:(UIImage *)image scaledToSize:(CGFloat)newSize {
CGAffineTransform scaleTransform;
CGPoint origin;

if (image.size.width > image.size.height) {
    //landscape
    CGFloat scaleRatio = newSize / image.size.height;
    scaleTransform = CGAffineTransformMakeScale(scaleRatio, scaleRatio);
    origin = CGPointMake((int)(-self.scrollView.contentOffset.x*scaleRatio),0);
} else if (image.size.width < image.size.height) {
    //portrait
    CGFloat scaleRatio = newSize / image.size.width;
    scaleTransform = CGAffineTransformMakeScale(scaleRatio, scaleRatio);
    origin = CGPointMake(0, (int)(-self.scrollView.contentOffset.y*scaleRatio));
} else {
    //square
    CGFloat scaleRatio = newSize / image.size.width;
    scaleTransform = CGAffineTransformMakeScale(scaleRatio, scaleRatio);
    origin = CGPointMake(0, 0);
}

UIGraphicsBeginImageContextWithOptions(size, YES, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextConcatCTM(context, scaleTransform);
[image drawAtPoint:origin];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return image;
}

So for example with landscape, if I drag the scroll left so that the image is cropped all the way to the right, my offset will be close on a 6+ but on a 4S it will be off by about 150-200 in terms of the CGPoint.

Here is my code for setting up the scroll view and image view:

CGRect cropRect = CGRectMake(0.0f,0.0,SCREEN_WIDTH,SCREEN_WIDTH);
CGFloat ratio = (int)self.image.size.height/self.image.size.width;
CGRect r = CGRectMake(0.0,0.0,SCREEN_WIDTH,SCREEN_WIDTH);

if (ratio>1.00) {
    //portrait
    r = CGRectMake(0.0,0.0,SCREEN_WIDTH,(int)(SCREEN_WIDTH*ratio));
} else if (ratio<1.00) {
    //landscape
    CGFloat size = (int)self.image.size.width/self.image.size.height;
    cropOffset = (SCREEN_WIDTH*size)-SCREEN_WIDTH;
    r = CGRectMake(0.0,0.0,(int)(SCREEN_WIDTH*size),SCREEN_WIDTH);
}

NSLog(@"r.size.height == %.4f",r.size.height);
self.scrollView.frame = cropRect;
self.scrollView.contentSize = r.size;

self.imageView = [[UIImageView alloc] initWithFrame:r];
self.imageView.backgroundColor = [UIColor clearColor];
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
self.imageView.image = self.image;

[self.scrollView addSubview:self.imageView];

Answer 1

Cropping math can be tricky. It's been a while since I've had to deal with this, so hopefully I'm pointing you in the right direction. Here is a chunk of code from Pixology that grabs a scaled visible rect from a UIScrollView. I think the missing ingredient here might be zoomScale .

CGRect visibleRect;
visibleRect.origin = _scrollView.contentOffset;
visibleRect.size = _scrollView.bounds.size;
// figure in the scale
float theScale = 1.0 / _scrollView.zoomScale;
visibleRect.origin.x *= theScale;
visibleRect.origin.y *= theScale;
visibleRect.size.width *= theScale;
visibleRect.size.height *= theScale;

You may also need to figure in device screen scale:

CGFloat screenScale = [[UIScreen mainScreen] scale];

See how far you can get with this info, and let me know.