I've made a CALayer
with an added CATextLayer
and the text comes out blurry. In the docs, they talk about "sub-pixel antialiasing", but that doesn't mean much to me. Anyone have a code snippet that makes a CATextLayer
with a bit of text that is clear?
Here's the text from Apple's documentation:
Note: CATextLayer disables sub-pixel antialiasing when rendering text. Text can only be drawn using sub-pixel antialiasing when it is composited into an existing opaque background at the same time that it's rasterized. There is no way to draw subpixel-antialiased text by itself, whether into an image or a layer, separately in advance of having the background pixels to weave the text pixels into. Setting the opacity property of the layer to YES does not change the rendering mode.
The second sentence implies that one can get good looking text if one composites
it into an existing opaque background at the same time that it's rasterized.
That's great, but how do I composite it and how do you give it an opaque background and how do you rasterize it?
The code they use in their example of a Kiosk Menu is as such: (It's OS X, not iOS, but I assume it works!)
NSInteger i; for (i=0;i<[names count];i++) { CATextLayer *menuItemLayer=[CATextLayer layer]; menuItemLayer.string=[self.names objectAtIndex:i]; menuItemLayer.font=@"Lucida-Grande"; menuItemLayer.fontSize=fontSize; menuItemLayer.foregroundColor=whiteColor; [menuItemLayer addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMaxY relativeTo:@"superlayer" attribute:kCAConstraintMaxY offset:-(i*height+spacing+initialOffset)]]; [menuItemLayer addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX relativeTo:@"superlayer" attribute:kCAConstraintMidX]]; [self.menuLayer addSublayer:menuItemLayer]; } // end of for loop
Thanks!
EDIT: Adding the code that I actually used that resulted in blurry text. It's from a related question I posted about adding a UILabel
rather than a CATextLayer
but getting a black box instead. http://stackoverflow.com/questions/3818676/adding-a-uilabels-layer-to-a-calayer-and-it-just-shows-black-box
CATextLayer* upperOperator = [[CATextLayer alloc] init]; CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); CGFloat components1[4] = {1.0, 1.0, 1.0, 1.0}; CGColorRef almostWhite = CGColorCreate(space,components1); CGFloat components2[4] = {0.0, 0.0, 0.0, 1.0}; CGColorRef almostBlack = CGColorCreate(space,components2); CGColorSpaceRelease(space); upperOperator.string = [NSString stringWithFormat:@"13"]; upperOperator.bounds = CGRectMake(0, 0, 100, 50); upperOperator.foregroundColor = almostBlack; upperOperator.backgroundColor = almostWhite; upperOperator.position = CGPointMake(50.0, 25.0); upperOperator.font = @"Helvetica-Bold"; upperOperator.fontSize = 48.0f; upperOperator.borderColor = [UIColor redColor].CGColor; upperOperator.borderWidth = 1; upperOperator.alignmentMode = kCAAlignmentCenter; [card addSublayer:upperOperator]; [upperOperator release]; CGColorRelease(almostWhite); CGColorRelease(almostBlack);
EDIT 2: See my answer below for how this got solved. sbg.
Short answer — You need to set the contents scaling:
textLayer.contentsScale = [[UIScreen mainScreen] scale];
A while ago I learned that when you have custom drawing code, you have to check for the retina display and scale your graphics accordingly. UIKit
takes care of most of this, including font scaling.
Not so with CATextLayer.
My blurriness came from having a .zPosition
that was not zero, that is, I had a transform applied to my parent layer. By setting this to zero, the blurriness went away, and was replaced by serious pixelation.
After searching high and low, I found that you can set .contentsScale
for a CATextLayer
and you can set it to [[UIScreen mainScreen] scale]
to match the screen resolution. (I assume this works for non-retina, but I haven't checked - too tired)
After including this for my CATextLayer
the text became crisp. Note - it's not necessary for the parent layer.
And the blurriness? It comes back when you're rotating in 3D, but you don't notice it because the text starts out clear and while it's in motion, you can't tell.
Problem solved!
Set the text layer to use the same scale as the screen.
textLayer.contentsScale = UIScreen.main.scale
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With