iPhone - Jagged Edges when applying perspective to CALayer

Question

I have a CALayer that I apply a perspective to using a CGTransform3D and specifying the m14 property. When the perspective is applied, the layer has jagged edges. I've heard people mention that adding a 1px transparent border around the layer will help with this. I don't know how to do that. I have tried using the border and borderWidth properties of a CALayer but the jagged edges are still there. I also tried to reduce the rect that is drawn by 1px on all sides, but it doesn't help either.

Any help would be great! Thanks!

Answer 1

The best solution I found for this issue was to set shouldRasterize to YES and set the rasterization scale to the scale of the device's screen.

myLayer.shouldRasterize = YES;
myLayer.rasterizationScale = UIScreen.mainScreen().scale // iOS
myLayer.rasterizationScale = NSScreen.mainScreen()!.backingScaleFactor // OSX

That will in turn smooth out the edges for you.

Answer 2

By "I've heard people mention," I assume you mean the discussion on this question. What was suggested there was to actually draw the content in your CALayer so that it has a one-pixel transparent border outside of the core content, using the code

CGContextSetAllowsAntialiasing(theContext, true);
CGContextSetShouldAntialias(theContext, true);

within your Quartz drawing for that layer.

There's also the edgeAntialiasingMask property on CALayer, but I've seen no impact when using code like the following:

layer.edgeAntialiasingMask = kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge;

on the antialiasing of transformed layer edges. See also this question for discussion of this, as well as how they solved their problem using one-pixel transparent borders around their images.

Answer 3

Give your CALayer a mask that's inset 0.5 px from each edge:

UIView *aliasedView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)];

CALayer *maskLayer = [[CALayer alloc] init];
maskLayer.frame = CGRectMake(0.5, 0.5, width-1, height-1);
maskLayer.backgroundColor = [UIColor whiteColor].CGColor;

aliasedView.layer.mask = maskLayer;