IPhone - Jagged Edges When Applying Perspective To CALayer

Question

I have CALayer, I apply the perspective to using CGTransform3D and specifying the m14 property. When perspective is applied, the layer has jagged edges. I heard people mention that adding a 1px transparent border around the layer will help with this. I do not know how to do that. I tried using the border and borderWidth properties, but the jagged edges still exist. I also tried to reduce the rectangle, which is drawn at 1px from all sides, but this also does not help.

Any help would be great! Thank!

Answer 1

By “I heard people mention,” I assume that you mean a discussion of this issue . It was suggested that you actually draw the content in your CALayer so that it has a transparent border with one pixel outside the main content using code

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

in your quartz drawing for this layer.

CALayer also has the edgeAntialiasingMask property, but I do not see any effect when using the code, for example:

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

when smoothing the edges of the transformed layer. See also this question for a discussion of this issue, as well as how they solved their problem using the transparent borders of one pixel around their images.

Answer 2

The best solution I found for this problem is to set the wasRasterize parameter to YES and set the rasterization scale to the device screen.

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

This, in turn, will smooth the edges for you.

Answer 3

Give your CALayer a mask pasting 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; 

Answer 4

A single pixel border smooths the edges of the contents (!) Of the layer:

 - (UIImage *)drawAntiAliased:(UIImage *)image { const int B = 1; // Border width (anti-aliasing) // Size of the output image CGSize newImageSize = CGSizeMake(image.size.width + 2 * B, image.size.height + 2 * B); UIGraphicsBeginImageContextWithOptions(newImageSize, NO, 0); // Draw image with edge anti-aliasing [image drawInRect:(CGRect){B, B, image.size}]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } 

If you want to use the boundary properties of a layer, this no longer works, because the border is not part of the contents of the layer and does not depend on smoothing.

The shouldRasterize , on the other hand, affects both the content and the borders.

Answer 5

In Swift 3.0:

 context.setAllowsAntialiasing(true) context.setShouldAntialias(true)