CGContextAddEllipseInRect to CGImageRef to CGImageMaskCreate to CGContextClipToMask

Question

I haven't been able to find one single example on the internets that teaches me how to create a circle on the fly and then use this circle to clip an UIImage.

Here's my code, unfortunately it doesn't give me desired results.

//create a graphics context
UIGraphicsBeginImageContext(CGSizeMake(243, 243));
CGContextRef context = UIGraphicsGetCurrentContext();

//create my object in this context
CGContextAddEllipseInRect(context, CGRectMake(0, 0, 243, 243));
CGContextSetFillColor(context, CGColorGetComponents([[UIColor whiteColor] CGColor]));
CGContextFillPath(context);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//create an uiimage from the ellipse


//Get the drawing image
CGImageRef maskImage = [image CGImage];

// Get the mask from the image
CGImageRef maskRef = CGImageMaskCreate(CGImageGetWidth(maskImage)
                                    , CGImageGetHeight(maskImage)
                                    , CGImageGetBitsPerComponent(maskImage)
                                    , CGImageGetBitsPerPixel(maskImage)
                                    , CGImageGetBytesPerRow(maskImage)
                                    ,  CGImageGetDataProvider(maskImage)
                                    , NULL
                                    , false);


//finally clip the context to the mask.

CGContextClipToMask( context , CGRectMake(0, 0, 243, 243) , maskRef );


//draw the image
[firstPieceView.image drawInRect:CGRectMake(0, 0, 320, 480)];
// [firstPieceView drawRect:CGRectMake(0, 0, 320, 480)];

//extract a new image
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();

NSLog(@"self.firstPieceView is %@", NSStringFromCGRect(self.firstPieceView.frame));
UIGraphicsEndImageContext();


self.firstPieceView.image = outputImage;

I would appreciate any directions.

`firstPieceView` should not be added to the view hierarchy if you are using its contents to manually draw in another view — bshirley, Jul 21 '11 at 05:03
the only place in your code that is valid to call `UIGraphicsGetCurrentContext()` is inside of a subclass of `UIView`'s `drawInRect:` method, is that where you are? - - - that's what i assumed in the comment above, but i suspect you're trying to clip and image to a circle **not** on the screen — bshirley, Jul 21 '11 at 05:05
I want it to clip and image to a circle on the screen. I am taking a picture with the camera and basically clip this image to a circle and draw it on the screen. — ilteris, Jul 21 '11 at 17:26

bshirley · Accepted Answer · 2011-07-25T19:30:25.427

I suspect you need to rephrase your question better. There's plenty of example code for whatever you're trying to do out there.

Here's how you could implement a custom UIView subclass to clip am image to an ellipse:

- (void)drawInRect:(CGRect)rect {
  UIImage image;// set/get from somewhere
  CGImageRef imageRef = [image CGImageRef];
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextAddEllipseInRect(context, self.bounds);
  CGContextClip(context);
  CGContextDrawImage(context, self.bounds, imageRef);
}

caveat emptor

Edit (a day later, free time produces):

- (void)drawRect:(CGRect)rect {
  // we're ignoring rect and drawing the whole view
  CGImageRef imageRef = [_image CGImage]; // ivar: UIImage *_image;
  CGContextRef context = UIGraphicsGetCurrentContext();

  // set the background to black
  [[UIColor blackColor] setFill];
  CGContextFillRect(context, self.bounds);


  // modify the context coordinates,
  // UIKit and CoreGraphics are oriented differently
  CGContextSaveGState(context);
    CGContextTranslateCTM(context, 0, CGRectGetHeight(rect));
    CGContextScaleCTM(context, 1, -1);

    // add clipping path to the context, then execute the clip
    // this is in effect for all drawing until GState restored
    CGContextAddEllipseInRect(context, self.bounds);
    CGContextClip(context);

    // stretch the image to be the size of the view
    CGContextDrawImage(context, self.bounds, imageRef);
  CGContextRestoreGState(context);
}

umm, above code has problems. UIImage *image... CGImageRef imageRef = [image CGImage]; etc. — ilteris, Jul 21 '11 at 17:34
I cannot make it to clip my image to circle with above code. why not clipToMask? — ilteris, Jul 21 '11 at 17:38
that was the _caveat emptor_ part, i didn't have the time to test it, that was off the top of my head — bshirley, Jul 21 '11 at 19:37
hey bshirley, you were right. I needed to be more clear with my questions. I opened up two different questions for it. Please respond when you have time. http://stackoverflow.com/questions/6820242/cliptomask-contracts-the-image — ilteris, Jul 25 '11 at 17:56
and http://stackoverflow.com/questions/6820014/image-is-rotated-90-degrees-when-using-cliptomask — ilteris, Jul 25 '11 at 17:57

CGContextAddEllipseInRect to CGImageRef to CGImageMaskCreate to CGContextClipToMask

1 Answers1