Draw glow around inside edge of multiple CGPaths

Question

If I create a CGMutablePathRef by adding together two circular paths as shown by the left image, is it possible to obtain a final CGPathRef which represents only the outer border as shown by the right image?

Thanks for any help!

Beery

I'm amazed how many times this question has been viewed. I needed this exact same effect as well! Also with a translucent "fill" in the path itself. – Adhere

Answer 1

What you are asking for is the union of bezier paths. Apple doesn't ship any APIs for computing the union of paths. It is in fact a rather complicated algorithm. Here are a couple of links:

• http://www.cocoadev.com/index.pl?NSBezierPathcombinatorics
• http://losingfight.com/blog/2011/07/09/how-to-implement-boolean-operations-on-bezier-paths-part-3/

If you explain what you want to do with the union path, we might be able to suggest some alternatives that don't require actually computing the union.

You can draw a pretty decent inner glow without actually computing the union of the paths. Instead, make a bitmap. Fill each path on the bitmap. You'll use this as the mask. Next, create an inverted image of the mask, that has everything outside of the union area filled. You'll draw this to make CoreGraphics draw a shadow around the inner edge of the union. Finally, set the mask as your CGContext mask, set the shadow parameters, and draw the inverted image.

Ok, that sounds complicated. But here's what it looks like (Retina version on the right):

It's not perfect (too light at the corners), but it's pretty good.

So here's the code. I'm passing around UIBezierPaths instead of CGPaths, but it's trivial to convert between them. I use a some UIKit functions and objects. Remember that you can always make UIKit draw to an arbitrary CGContext using UIGraphicsPushContext and UIGraphicsPopContext.

First, we need an mask image. It should be an alpha-channel-only image that is 1 inside any of the paths, and 0 outside all of the paths. This method returns such an image:

- (UIImage *)maskWithPaths:(NSArray *)paths bounds:(CGRect)bounds
{
    // Get the scale for good results on Retina screens.
    CGFloat scale = [UIScreen mainScreen].scale;
    CGSize scaledSize = CGSizeMake(bounds.size.width * scale, bounds.size.height * scale);

    // Create the bitmap with just an alpha channel.
    // When created, it has value 0 at every pixel.
    CGContextRef gc = CGBitmapContextCreate(NULL, scaledSize.width, scaledSize.height, 8, scaledSize.width, NULL, kCGImageAlphaOnly);

    // Adjust the current transform matrix for the screen scale.
    CGContextScaleCTM(gc, scale, scale);
    // Adjust the CTM in case the bounds origin isn't zero.
    CGContextTranslateCTM(gc, -bounds.origin.x, -bounds.origin.y);

    // whiteColor has all components 1, including alpha.
    CGContextSetFillColorWithColor(gc, [UIColor whiteColor].CGColor);

    // Fill each path into the mask.
    for (UIBezierPath *path in paths) {
        CGContextBeginPath(gc);
        CGContextAddPath(gc, path.CGPath);
        CGContextFillPath(gc);
    }

    // Turn the bitmap context into a UIImage.
    CGImageRef cgImage = CGBitmapContextCreateImage(gc);
    CGContextRelease(gc);
    UIImage *image = [UIImage imageWithCGImage:cgImage scale:scale orientation:UIImageOrientationDownMirrored];
    CGImageRelease(cgImage);
    return image;
}

That was actually the hard part. Now we need an image that is our glow color everywhere outside of the mask (path union) area. We can use UIKit functions to make this easier than a pure CoreGraphics approach:

- (UIImage *)invertedImageWithMask:(UIImage *)mask color:(UIColor *)color
{
    CGRect rect = { CGPointZero, mask.size };
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, mask.scale); {
        // Fill the entire image with color.
        [color setFill];
        UIRectFill(rect);
        // Now erase the masked part.
        CGContextClipToMask(UIGraphicsGetCurrentContext(), rect, mask.CGImage);
        CGContextClearRect(UIGraphicsGetCurrentContext(), rect);
    }
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

With those two images, we can draw an inner glow into the current UIKit graphics context for an array of paths:

- (void)drawInnerGlowWithPaths:(NSArray *)paths bounds:(CGRect)bounds color:(UIColor *)color offset:(CGSize)offset blur:(CGFloat)blur
{
    UIImage *mask = [self maskWithPaths:paths bounds:bounds];
    UIImage *invertedImage = [self invertedImageWithMask:mask color:color];
    CGContextRef gc = UIGraphicsGetCurrentContext();

    // Save the graphics state so I can restore the clip and
    // shadow attributes after drawing.
    CGContextSaveGState(gc); {
        CGContextClipToMask(gc, bounds, mask.CGImage);
        CGContextSetShadowWithColor(gc, offset, blur, color.CGColor);
        [invertedImage drawInRect:bounds];
    } CGContextRestoreGState(gc);
}

To test it, I created an image using a couple of circles and put it in a UIImageView:

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 60, 60)];
    UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 60, 60)];
    NSArray *paths = [NSArray arrayWithObjects:path1, path2, nil];

    UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0.0); {
        [self drawInnerGlowWithPaths:paths bounds:self.imageView.bounds color:[UIColor colorWithHue:0 saturation:1 brightness:.8 alpha:.8] offset:CGSizeZero blur:10.0];
    }
    imageView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
}

Carrycarryall

Hi, Rob. I want to simulate a glow effect around the inside edge of the union. This is done with clipping and shadow blurring, but I need to be able to clip the shape of the union first. – Beery

Rob, thanks for all the help, and the code to produce this effect. This works perfectly! – Beery

This works great, how would I fill the area outside these shape with a background color? Say I wanted a [UIColor colorWithWhite:0.000 alpha:0.750] as the semi-transparent background with these circles cut of of it? – Transmundane

@Transmundane You need to post that as a new question, not as a comment. – Carrycarryall

Answer 2

Here are two ways in Swift 3:

path code:

    let radius          = rect.height * 0.25
    let centerX         = rect.width  * 0.5
    let centerY         = rect.height * 0.5
    let arcCenterOffset = radius - radius * 0.5 * sqrt(3)
    let degree:(_: CGFloat) -> CGFloat = {
        return CGFloat.pi * $0 / 180
    }

    let gourd   = UIBezierPath()
    let circle1 = UIBezierPath(arcCenter: CGPoint(x: centerX - radius + arcCenterOffset, y: centerY), radius: radius, startAngle: degree(-30), endAngle: degree(30), clockwise: false)
    let circle2 = UIBezierPath(arcCenter: CGPoint(x: centerX + radius - arcCenterOffset, y: centerY ), radius: radius, startAngle: degree(150), endAngle: degree(-150), clockwise: false)
    gourd.append(circle1)
    gourd.append(circle2)

    let gourdInverse = UIBezierPath(cgPath: gourd.cgPath)
    let infiniteRect = UIBezierPath(rect: .infinite)
    gourdInverse.append(infiniteRect)

    guard let c = UIGraphicsGetCurrentContext() else {
        fatalError("current context not found.")
    }

1. even odd fill rule:

   c.beginPath()
   c.addPath(gourdInverse.cgPath)
   c.setShadow(offset: CGSize.zero, blur: 10, color: UIColor.red.cgColor)
   c.setFillColor(UIColor(white: 1, alpha: 1).cgColor)
   c.fillPath(using: .evenOdd)
   

2. clip

   c.beginPath()
   c.addPath(gourd.cgPath)
   c.clip()
   
   c.beginPath()
   c.addPath(gourdInverse.cgPath)
   c.setShadow(offset: CGSize.zero, blur: 10, color: UIColor.red.cgColor)
   c.fillPath()
   

Retroversion