Anti-aliasing approaches

[skizzo]

Hi and first of all thanks for that magnificent library! I've started playing around with it a bit and realized that the edges of my transformed image happen to be quite.. rough. Do you have any suggestions how it would be possible to implement some anti-aliasing, especially for the edges? Thanks a lot for any hints.

[hfossli]

Hello @skizzo ! Thanks for the kind words!

Are you talking about views in general using the layer.quadrilateral API or are you talking about images you are rendering using this API

@interface UIImage (AGKQuad)

- (UIImage *)imageByCroppingToQuad:(AGKQuad)quad destinationSize:(CGSize)destinationSize;
- (UIImage *)imageByCroppingToRect:(CGRect)rect;
- (UIImage *)imageWithPerspectiveCorrectionFromQuad:(AGKQuad)quad;

@end

?

[skizzo]

sorry, i actually mean both but could live with a preview as it is (setting the quad of a UIView) but a better looking rendering!

[hfossli]

Allright, I get you. With regards to the preview there's some pretty quick and easy fixes I would recommend. https://markpospesel.wordpress.com/2012/03/30/efficient-edge-antialiasing/ Especially the transparent line trick!

When it comes to rendering to UIImage this is already an issue, https://github.com/hfossli/AGGeometryKit/issues/23. We can continue discussion at that issue.

[skizzo]

Unfortunately, neither of the approaches mentioned in the link change anything about how the edges are displayed, but thanks.

[hfossli]

+ (UIImage *)renderImageForAntialiasing:(UIImage *)image withInsets:(UIEdgeInsets)insets
{
    CGSize imageSizeWithBorder = CGSizeMake([image size].width + insets.left + insets.right, [image size].height + insets.top + insets.bottom);

    // Create a new context of the desired size to render the image
    UIGraphicsBeginImageContextWithOptions(imageSizeWithBorder, NO, 0);

    // The image starts off filled with clear pixels, so we don't need to explicitly fill them here 
    [image drawInRect:(CGRect){{insets.left, insets.top}, [image size]}];

    // Fetch the image   
    UIImage *renderedImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return renderedImage;
}

This didn't work?

Assumed old code

self.imageView.image = [UIImage imageWithName:@"foo.jpg"];

New code

UIImage *original = [UIImage imageWithName:@"foo.jpg"];
UIImage *aliased = [self renderImageForAntialiasing:original withInsets:UIEdgeInsetsMake(1, 1, 1, 1)];
self.imageView.image = aliased;

[skizzo]

Nope, tried exactly this code. Turns out that this line solved the anti-aliasing problem:

[self.imageView.layer setMinificationFilter:kCAFilterTrilinear];

No hard edges any more :)

[hfossli]

Huh, I find that really really strange. I've used that technique many times.

Any performance drops using setMinificationFilter:?

[skizzo]

Maybe it's because I use a pretty huge image in a small UIImageView, don't know to be honest. I'll let you know if there are performance drops, right now I have to get to a point of being able to determine that :)