How to add a stroke around an image? - ios

Question

Question
I have a CGImageRef image. It is actually a image which is going to be used as a mask. So, the "alpha layer" of it is what I really care about. I want to "thicken" the opaque part of the image, as if I would add a stroke around the opaque part. How to do that?
More context
I have an image (a CGImageRef) like that:
It has been created by
mask = CGBitmapContextCreateImage(context);
I'm using it as a mask. The UIView under the mask is the same text. The problem is that the text underneath is not completed covered by the mask. See:
More code
This code is in a UILabel subclass.
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw text normally
[super drawTextInRect:rect];
if (self.alternativeTextColor) {
CGImageRef mask = NULL;
// Create a mask from the text
mask = CGBitmapContextCreateImage(context);
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0, self.frame.size.height);
CGContextScaleCTM(context, 1.0, (CGFloat) -1.0);
// Clip the current context to our mask
CGContextClipToMask(context, rect, mask);
// Set fill color
CGContextSetFillColorWithColor(context, [self.alternativeTextColor CGColor]);
// Path from mask
CGPathRef path;
if (CGRectIsEmpty(self.maskFrame)) {
path = CGPathCreateMutable();
} else {
UIBezierPath *roundRectBezierPath = [UIBezierPath bezierPathWithRoundedRect:self.maskFrame
cornerRadius:self.maskCornerRadius];
path = CGPathCreateCopy([roundRectBezierPath CGPath]);
}
CGContextAddPath(context, path);
// Fill the path
CGContextFillPath(context);
CFRelease(path);
// Clean up
CGContextRestoreGState(context);
CGImageRelease(mask);
}
}
Link to the project
https://github.com/colasjojo/Test-NYSegmentedControl

Answer 1

If you are trying to clip to text, I'd suggest not doing it via an intermediate bitmap and instead clipping to the paths of the actual text as in the snippet below from SVGgh's GHText class:
CGContextSaveGState(quartzContext);
CGContextSetTextDrawingMode(quartzContext, kCGTextStrokeClip);
CGContextSetLineWidth(quartzContext, strokeWidthToUse);
... Draw Text here ....
CGContextReplacePathWithStrokedPath(quartzContext);
CGContextClip(quartzContext);
... Do clipped drawing here ...
CGContextSetTextDrawingMode(quartzContext, kCGTextFill);
CGContextRestoreGState(quartzContext);
This isn't answering your question, but it's probably what you should do instead. Play around with CGContextSetTextDrawingMode to get the effect you are going for.