Resolved UIImagePickerController editing view circle overlay - resolved

Discussion in 'iOS Programming' started by troop231, Dec 27, 2013.

  1. troop231, Dec 27, 2013
    Last edited: Dec 27, 2013

    troop231 macrumors 603

    Jan 20, 2010
    I've been able to get pretty far with what I've been wanting to accomplish, and that's to replicate iOS's built in circular photo cropper for the built in contacts app.

    However, I'm stuck at trying to get my CAShapeLayers made correctly. I'm trying to make a transparent 320 px diameter circle and the rest of the view filled with an 0.9 alpha black background. The circle and rectangle are in the right place, but, the circle is not completely transparent like I need it to be.

    I'm lost as to how to fix this. I appreciate your help! Code and screenshot:

    Edit: Resolved code below:

    - (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
        if ([navigationController.viewControllers count] == 3)
            CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
            UIView *plCropOverlay = [[[viewController.view.subviews objectAtIndex:1]subviews] objectAtIndex:0];
            plCropOverlay.hidden = YES;
            int position = 0;
            if (screenHeight == 568)
                position = 124;
                position = 80;
            CAShapeLayer *circleLayer = [CAShapeLayer layer];
            UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:
                                   CGRectMake(0.0f, position, 320.0f, 320.0f)];
            [path2 setUsesEvenOddFillRule:YES];
            [circleLayer setPath:[path2 CGPath]];
            [circleLayer setFillColor:[[UIColor clearColor] CGColor]];
            UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 320, screenHeight-72) cornerRadius:0];
            [path appendPath:path2];
            [path setUsesEvenOddFillRule:YES];
            CAShapeLayer *fillLayer = [CAShapeLayer layer];
            fillLayer.path = path.CGPath;
            fillLayer.fillRule = kCAFillRuleEvenOdd;
            fillLayer.fillColor = [UIColor blackColor].CGColor;
            fillLayer.opacity = 0.8;
            [viewController.view.layer addSublayer:fillLayer];
            UILabel *moveLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, 320, 50)];
            [moveLabel setText:@"Move and Scale"];
            [moveLabel setTextAlignment:NSTextAlignmentCenter];
            [moveLabel setTextColor:[UIColor whiteColor]];
            [viewController.view addSubview:moveLabel];
  2. tacotester1 macrumors member

    Dec 19, 2013
    that's awesome!
    I think people will like that

    I'm still working on a square crop. do you know of any reference code for
    an instagram like crop from a library or camera photo?

  3. Duncan C macrumors 6502a

    Duncan C

    Jan 21, 2008
    Northern Virginia
    You need to experiment with a filled bezier path (or CGPath) that is a rectangle with a circle inside it. With the correct winding rule you should be able to create the shape you want.

    UIBezierPath is a little easier to deal with, and it has a property that lets you reference the internal CGPath object.

    Here's what I would do:

    Open a path

    Draw your rectangle
    Draw your circle
    Close the path.

    Add the path as the path of your shape layer.

    The default fill rule of kCAFillRuleNonZero should work (I think) but if not, try the other rule, kCAFillRuleEvenOdd.

    Set the fill color to your 90% opaque black color:

    myShapeLayer.fillColor = 
      [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: .9].CGColor;
  4. irockit88 macrumors newbie

    May 13, 2014
    Quick Question.

    What header/source files did you have to add to the code for it to work correctly?
  5. waterskier2007 macrumors 68000


    Jun 19, 2007
    Novi, MI
    Just one quick pointer, instead of using a vertical position, couldn't you use CGRectInset() to make the rectangle for your oval?
  6. venkadesh macrumors newbie

    Nov 3, 2015

    Can you please tell me how to crop the original image with the above circular overlay ?

Share This Page