iOS：透明文本通过文本显示背景

Question

我正在尝试通过文本使背景可见。这是一个例子。

我使用以下代码使其工作。

- (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];
}

它几乎可以工作，但是因为它使用渲染的文本作为蒙版，所以它似乎失去了如本例所示的抗锯齿效果。

我想知道是否有办法获得像第一张图片一样的结果。任何帮助将不胜感激。

Answer 1

您是否考虑过在设置文本颜色时使用 alpha 值？ UIColor 和 CGColor 都允许使用 alpha 值来设置文本的透明度。

例如，你可以使用类似的东西

yourTextColor = [UIColor colorWithWhite:0 alpha:0.5].CGColor; //remove the ".CGColor" if you are using UIColor

这会产生半透明的灰色。 UIColor 也有一个方法来设置 RGBA 值，以防你想要特定的颜色。

查看您的图片，我建议使用 0.85-0.95 范围内的 alpha 值。

希望这会有所帮助。

编辑：进一步查看您的代码，当您开始 imageContext 时，您可能没有提供视网膜显示屏。我建议替换此语句：

UIGraphicsBeginImageContext(imageView.bounds.size);

用这个块：

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);