Question

Suppose you wanna implement the same functionality iOS’s camera ‘Zoom & Crop’ has… in which you can scroll and crop an image.

Any section of the picture that exceeds the size of the crop area gets grayed out.
I’m trying to replicate exactly that. Provided that the flag ‘clipToBounds’ is set to NO, you can get the whole subview to get displayed.

However, i’m finding it a bit hard to gray out the UIScrollView’s subviews overflow.

How would you implement that?.
Thanks in advance!

Answer 1

I’ve solved this issue by…:

• Adding a new helper class, ‘ApertureOverlay’ (subclass of UIView), with the following code:

  • (void)drawRect:(CGRect)rect
    {

    if(CGRectEqualToRect(_apertureRect, CGRectZero) == NO)

    {

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetShouldAntialias(context, false);
    
    CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f);
    CGContextFillRect(context, _apertureRect);
    
    CGContextSetShouldAntialias(context, true);
    

    }

  }

• ApertureOverlay has a background with the alpha byte set to 50%.

  [self setBackgroundColor:[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.5f]];

So far… al we’ve got is a view with transparent background, and a white rectangle (drawn with _apertureRect position + size).

After implementing this class, i’ve set up the ‘mask’ attribute of the ScrollView, which contains the image inside.

[[self layer] setMask:[_apertureOverlayView layer]];

That’s it!. If you update the ApertureOverlay’s ‘_apertureRect’ attribute, you’ll need to call ‘setNeedsDisplay’, so it gets redrawn.

One more thing. By setting the antialias to false (ApertureOverlay)… things work pretty smooth.