Blending with Quartz 2D

Question

The above is a UITableViewCell containing two UILabels. The cell has a transparent background using [UIColor clearColor] and the background pattern (you may need to look closely to see it) is set on the UITableView using UIColor's initWithPatternImage.

What I'd like to be able to do is blend the text with the background pattern so that the text has the texture coming through. The only thing is I'm not sure of is the best way of achieving this.

I know I can use NSString instead of UILabels and draw the text directly into an image, but can this then be blended with the background even though it's not being drawn in the same drawRect (i.e. the text image would be drawn in a subclass of UITableViewCell where as the background is being drawn by the UITableView instance)?

The other way is to create an image mask from the text, have another image which is already textured (with the top half white and the bottom half dark grey) and then use that to draw the text, as outlined in this Cocoa with Love tutorial.

Whilst I can obviously use the tutorial to achieve the second implementation, I'm more inclined to explore the first as it'd use no external images and may be more efficient.

Your thoughts, links and code examples will be greatly appreciated.

Please Note: Setting a low alpha value on the UILabels does not achieve the desired effect

Answer 1

If you set the labels as non opaque and an alpha value less than 1.0 it should work. These can be set in either Interface Builder or as code like this:

[theIncidentLabel setOpaque:NO];
[theIncidentLabel setAlpha:0.5];

You can even just set the text color to a color with an alpha value less than 1.0.

[theIncidentLabel setTextColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5]];

Using these settings I do see the background texture through labels in a project I'm working on. In my project the list UITableView is also transparent, and the background texture comes from an image loaded in a UIImageView behind the UITableView.

This is simple alpha blending. We figured out through a discussion in comments that this is inadequate for your needs. Instead you can use the alpha masking as explained in the tutorial mentioned.

Alternatively, you could forgo alpha masks and just draw the text to a CGImage, then draw that image on your background pattern with a different blend mode, maybe kCGBlendModeScreen. Here's the drawRect method from the above mentioned tutorial rewritten with this technique:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
        // Draw a black background
    [[UIColor blackColor] setFill];
    CGContextFillRect(context, rect);

        // Draw the text upside-down
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, 0, rect.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    [[UIColor lightGrayColor] setFill];
    [text drawInRect:rect withFont:[UIFont fontWithName:@"HelveticaNeue-Bold" size:40.0]];
        // Draw it again in a darker color.
    [[UIColor darkGrayColor] setFill];
    CGContextTranslateCTM(context, 0, 50.0);
    [text drawInRect:rect withFont:[UIFont fontWithName:@"HelveticaNeue-Bold" size:40.0]];
    CGContextRestoreGState(context);

        // Create an text image from what we've drawn so far
    CGImageRef textImage = CGBitmapContextCreateImage(context);

        // Draw a white background (overwriting the previous work)
    [[UIColor whiteColor] setFill];
    CGContextFillRect(context, rect);

        // Draw the background image
    CGContextSaveGState(context);
    [[UIImage imageNamed:@"shuttle.jpg"] drawInRect:rect];
        // Set the blend mode. Try different options to meet your tastes.
    CGContextSetBlendMode(context, kCGBlendModeScreen);
        // Draw the text.
    CGContextDrawImage(context, rect, textImage);
        // Clean up.
    CGContextRestoreGState(context);
    CGImageRelease(textImage);
}