agens-no/AGGeometryKit

Anti-aliasing approaches

Closed this issue · 8 comments

skizzo commented

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 commented

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 commented

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 commented

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, #23. We can continue discussion at that issue.

skizzo commented

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

hfossli commented 
+ (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 commented

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 commented

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

Any performance drops using setMinificationFilter:?

skizzo commented

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 :)

  • 👍1