Search code examples
iphoneiosquartz-graphicsquartz-2d

Stroke is being applied to both Text and Shadow

I'm trying to simply draw some text with a stroke and then apply a drop shaddow, but the stroke is being applied to drop shadow. How do I prevent this?

Notice stroke is applied to drop shadow

// Setup context
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);

// draw photo into context
CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);
// Set Text Font
CGContextSelectFont(context, font.fontName.UTF8String, fontSize, kCGEncodingMacRoman);

// Set Text Drawing Mode
CGContextSetTextDrawingMode(context, kCGTextFillStroke);

// Set text fill color
CGColorRef tmpColor = color.CGColor;
CGFloat newComponents[4] = {};
memcpy(newComponents, CGColorGetComponents(tmpColor), sizeof(newComponents));
CGContextSetRGBFillColor(context, newComponents[0], newComponents[1], newComponents[2], newComponents[3]);

// Calculate Height
UIFont *testFont = [UIFont fontWithName:font.fontName size:fontSize];
CGSize size = [text sizeWithFont:testFont];

// Setup Font Shadow
CGSize shadowSize = CGSizeMake(6, 6);
CGContextSetShadowWithColor(context, shadowSize, 1.0, [[UIColor darkGrayColor] CGColor]);

// Set Stroke Color
CGContextSetRGBStrokeColor(context, 0, 255, 0, 1);
CGContextSetLineWidth(context, 2.0);

// draw text at location centered based on width.
CGContextShowTextAtPoint(context, (w / 2) - (textWidth / 2), h - size.height, ctext, strlen(ctext));

// Render Bitmap
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
UIImage *returnImage = [UIImage imageWithCGImage:imageMasked];
Solution

  • Because your text drawing mode is kCGTextFillStroke, CGContextShowTextAtPoint is first drawing the fill (and generating a shadow for it), and then drawing the stroke (which gets its own shadow).

    To fix it, use a transparency layer.

    Note that it will draw much faster if you use CGContextBeginTransparencyLayerWithRect() and pass in as small a rect as you can.

    Alternatively: if it's a good enough approximation, you might consider drawing your text in two steps:

    1. fill, with shadow
    2. stroke, with no shadow

    If your stroke is small, the difference will not be very perceptible, and it will draw considerably faster.