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