iphone - How to crop a UIImageView to a custom shape

Question

Is it possible for a user to draw a dotted line (in a circle) around the bit of the UIImageView they wish to crop to, and then for the UIImageView to resize to those points? It's a bit like the lasso/marquee effect in Photoshop:

Answer 1

Update: Since iOS 8.x, UIImageView provides a maskView property. Just prepare an image with some opaque pixels, create another image view with that mask image, and set this mask image view as the maskView. The opaque pixels in the mask image will be the ones shown in the underlying image.

    UIImageView *maskView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"somemask"]];
    maskView.frame = imageView.bounds;
    imageView.maskView = maskView;
    // imageView will be masked by maskView

.

Original Answer

There's quite a bit to do, but here's a high-level outline:

1. create an empty image which will become a mask
2. build a path in that image from user input
3. fill the path to turn it into a mask
4. apply the mask to the imageview's image

Create image: A simple idea here is to just ship a black image with your project. It should be sized to match the maximum region a user can select. Read the image into memory (UIImage imageNamed:) and set it up as the drawing context by calling UIGraphicsBeginImageContext.

Create path: (see apple docs). When the user starts stroking the region, call CGContextBeginPath, then follow user gestures, sampling the touches and adding small segments by calling CGContextMoveToPoint repeatedly as touchesMoved.

Create mask: To turn the path into a mask you want a black background and the path filled with white. If you started with a black image, you just need to do the fill. See the same apple guide about doing that.

Finally, you'll apply this mask to your imageView's image. Here's a decent reference for that.

Answer 2

This answers just one part of your question i suppose, but here's an example on how to draw and animate the dotted line (i.e. marching ants effect).