Third Raven

(Wherein our studious protagonist shares his solution for cropping an image in Project NP.)

Recently I’ve been hammering away at the menus for Project NP. I get a little weird spending so much time on visuals while doing so little programming — it has the same sort of feel for me as grinding in an MMO -_-;;

A key feature of the app for me was being able to select any picture on your iDevice to use for the puzzle. It’s unlikely that all of those pictures are square though, so there needed to be some facility for cropping the pictures. While I’d always planned on implement a user driven implementation for this, up until recently I’d been doing it automatically. When I got to redesigning the relevant screen it seemed like good time to finally implement it, and it turned out to be easier than I expected!

The user interface

The interface was fairly simple — I have a UIScrollView the size of the slice I want to take (in my case a 300 x 300 square), which in turn contains an UIImage of the full sized image. Scrolling works straight out of the box, but the zooming took some minimal changes. First, the scroll view’s delegate needs to implement viewForZoomingInScrollView:, which should just return the view to scale:

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    if (scrollView == scrollView_)
        return imageView_;
    return nil;
}

Secondly, you need to provide a minimum and maximum zoom scale for the image — they have to have different values for the view to support zooming. My main requirement was that the image needs to fill the selection. I did set a constant for a max zoom scale too (currently I’m leaving it at 1.0, although I might play around with it a little). Given I’m creating the view for a particular image, viewDidLoad seemed like a good place to go about doing this:

- (void)viewDidLoad {
    [super viewDidLoad];

    imageView_.frame = CGRectMake(0, 0, image_.size.width, image_.size.height);
    imageView_.image = image_;
    scrollView_.contentSize = imageView_.frame.size;
    CGFloat minXZoom = scrollView_.frame.size.width / imageView_.size.width;
    CGFloat minYZoom = scrollView_.frame.size.height / imageView_.size.height;
    CGFloat minZoom = minXZoom > minYZoom ? minXZoom : minYZoom;
    scrollView_.minimumZoomScale = minZoom;
    if (minZoom > kMaxImageZoom) {
        // The image is too small to fill the screen, even at the maximum allowed zoom
        // Disable zooming by setting minimum and maximum zoom scale to the same value
        scrollView_.maximumZoomScale = minZoom;
    }
    else {
        scrollView_.maximumZoomScale = kMaxImageZoom;
    }
}

Thirdly, the docs say that the delegate must also implement scrollViewDidEndZooming:withView:atScale:. …But I haven’t bothered with it, and haven’t had any problems for not implementing it.

As an extra detail, I also wanted the image to be shown centered and fully zoomed out when the window appears:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [scrollView_ setZoomScale:imageScrollView.minimumZoomScale animated:NO];
    CGFloat centreOffsetX = (imageView_.frame.size.width - scrollView_.frame.size.width) /2;
    CGFloat centreOffsetY = (imageView_.frame.size.height - scrollView_.frame.size.height) /2;
    scrollView_.contentOffset = CGPointMake(centreOffsetX, centreOffsetY);
}

Done! You should now have a view that allows you to pan and zoom (from filling the view to as large as you allow) your image. Now you just need to be able to cut out the visible part of the image. Read on…

Cropping the image

Previously, when I’d been automatically cropping the image to fit, I’d used cocos2d (which I was already using for the game parts of the app) to create a sprite of the image and then scale and chop it us using a CCRenderTexture. It was a bit messy, but it involved zero learning — it was stuff that I knew and had used before. Of course, it also crashed when I tried to pass an image that was larger than the allowed texture size (1024×1024 for older iDevices, 2048×2048 for newer ones), an issue I didn’t notice for a long time. I’ll chalk that particular oversight to a lack of thorough testing — it was only by fluke that I had a large enough image to realise it (it was a map I needed to get somewhere!).

Anyways, in trying to find a solution to the issue, I realised you could do basically the same thing in all using UIKit. You can use UIGraphicsBeginContext() or UIGraphicsBeginContextWithOptions() to create a new graphics context, draw to it, and then get the image with UIGraphicsGetImageFromCurrentImageContext() (and finally clean up with UIGraphicsEndImageContext()). Here’s what it looks like in practice, to return the selected slice:

- (UIImage *)currentSlice {
    // Get the size of the scaled image
    CGSize sliceSize = imageView_.frame.size;

    // Create correctly scaled image
    UIGraphicsBeginImageContextWithOptions(sliceSize, NO, 0.0);
    [image_ drawInRect:CGRectMake(0, 0, sliceSize.width, sliceSize.height)];
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Create and return the image slice
    CGRect sliceRect = CGRectMake(scrollView_.contentOffset.x, scrollView_.contentOffset.y, scrollView_.frame.size.width, scrollView_.frame.size.height);
    CGImageRef imageSlice = CGImageCreateWithImageInRect(scaledImage.CGImage, sliceRect);
    return [UIImage imageWithCGImage:imageSlice];
}

See, easy!