IOS: transparent text to display background through text
I am trying to make the background visible through text. Here's an example.
I did it using the following code.
- (UIImage *)maskImage:(UIImage *)image withMask:(CGImageRef)maskRef {
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask);
UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef];
CGImageRelease(mask);
CGImageRelease(maskedImageRef);
// returns new image with mask applied
return maskedImage;
}
- (void)setImageForView:(UIImageView *)imageView withText:(NSString *)text {
NSDictionary *attributes = @{ NSFontAttributeName: [UIFont fontWithName:@"Helvetica-Neue" size:45], NSForegroundColorAttributeName: [UIColor whiteColor], NSBackgroundColorAttributeName: [UIColor blackColor] };
CGSize size = [text sizeWithAttributes:attributes];
CGPoint center = imageView.center;
imageView.frame = CGRectMake(0, 0, size.width + 10, 41);
imageView.center = center;
UIGraphicsBeginImageContext(imageView.bounds.size);
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw a dark gray background
CGRect rect = imageView.bounds;
CGContextFillRect(context, rect);
// Draw the text upside-down
CGContextSaveGState(context);
CGContextSetInterpolationQuality( context , kCGInterpolationHigh );
[text drawInRect:CGRectMake((rect.size.width - size.width) / 2, (rect.size.height - size.height) / 2, size.width, size.height) withAttributes:attributes];
CGContextRestoreGState(context);
// Create an image mask from what we've drawn so far
CGImageRef alphaMask = CGBitmapContextCreateImage(context);
UIGraphicsEndImageContext();
imageView.image = [self maskImage:[UIImage imageNamed:@"white"] withMask:alphaMask];
}
It almost works, but since it uses the displayed text as a mask, it seems to lose the anti-aliasing effect like in this example.
I wonder if there is a way to get the result like the first image. Any help would be appreciated.
source to share
Have you considered using an alpha value when setting your text color? Both UIColor and CGColor allow you to use an alpha value to set transparency for text.
For example, you can use something like
yourTextColor = [UIColor colorWithWhite:0 alpha:0.5].CGColor; //remove the ".CGColor" if you are using UIColor
This creates a translucent grayish color. UIColor also has a method for setting RGBA values if you need specific colors.
Looking at your images, I would suggest an alpha value in the 0.85-0.95 range.
Hope it helps.
EDIT: If you look further at your code, you might not be providing a retina display screen when the imageContext starts. I would suggest replacing this statement with:
UIGraphicsBeginImageContext(imageView.bounds.size);
with this block:
if ([[UIScreen mainScreen] respondsToSelector:@selector(displayLinkWithTarget:selector:)] && ([UIScreen mainScreen].scale == 2.0))//retina-display
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0);
else //non-retina display
UIGraphicsBeginImageContext(imageView.bounds.size);
source to share