iPhone - How do you make a resizable rectangle for cropping images?

Question

I'm having a trouble making a re-sizable rectangle for cropping my images. I'm trying to achieve something like this picture:

http://img192.imageshack.us/img192/8930/customcropbox.jpg

Well, the only problem is I have no clue where to actually start. I need some advice to how I can achieve this effect of cropping. What documentation should I read up on? Core Graphics or Quartz 2d? Both? I've been coding for the iPhone since it's release date but I've never actually used core graphics and etc. Any help or advice would be much appreciated. I'll throw my code up here as I progress to show how it's done when I achieve it. :-) Also, this rectangular box is moveable across the screen in a UIImageView which just makes it more interesting. Thanks for the help and I look forward to achieving this goal.

Answer 1

bookmark my question which is exactly the same.

I got as far as moving around my cropping view and having it show the portion of the image correctly, but dealing with the scrollview zooming is a work in progress. presently I have an imageview and plain UIView layered in the UIScrollview, then outside of the scrollview and at a higher level is my custom cropping UIView. I implement the touches methods to deal with dragging it around, and also drawRect:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    if( self.image == nil )
        return;

    CGPoint offset = scrollView.contentOffset;
    clipRect = CGRectOffset(self.frame, offset.x, offset.y);

    UIImage *croppedImage = [image croppedImage:clipRect];
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [croppedImage drawAtPoint:CGPointMake(0, 0)];
}

Note: my cropping view is NOT a descendant of UIImageView, it's just UIView with a reference to the underlying image from the other view.

"croppedImage" is a category on UIImage and pretty simple:

@implementation UIImage (Resize)
- (UIImage *)croppedImage:(CGRect)bounds {
    CGImageRef imageRef = CGImageCreateWithImageInRect([self CGImage], bounds);
    UIImage *croppedImage = [UIImage imageWithCGImage:imageRef];
    CGImageRelease(imageRef);
    return croppedImage;
}
...
@end

I've implemented a few of the UIScrollViewDelegate methods and pass through scrolling activity so I can keep my cropping view in sync. Zooming is passed along too, but as mentioned, not working as desired yet.

Another Note: I don't think it's necessary to waste the time generating a new UIImage with the cropped area every time as the same should be possible with

CGImageRef imageRef = CGImageCreateWithImageInRect([yourImage CGImage], bounds);
and 
CGContextDrawImage(ctx, clipRect, imageRef);

Answer 2

Quartz is the 'marketing term' for Core Graphics, and that's where you should start. You'll want to use a UIView (full custom drawing in -drawRect:), trap and track its touches, and then draw the result. You can get the current Graphics Context using UIGraphicsGetCurrentContext(). That should be enough to get you started!