UIViewやUIImageViewにアンチエイリアスをかける

UIViewやUIImageViewをアフィン変換で角度を変更した場合、縁がギザギザして非常に汚い。

これはアンチエイリアス処理が掛かっていないせいなので、アンチエイリアス処理を掛けて綺麗にしてみる。

今回は「Single View Application」でプロジェクトを新規作成する。
その際「Use Automatic Reference Counting」も使用することにする。

次にUIViewを実装するため、少々コードを書いていく。
（今回はUIViewで説明していくが、UIImageViewもUIViewの継承のため同様にアンチエイリアス処理が可能）

主要部分だけを説明していく。赤字の部分がポイント箇所。

◎ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

◎ViewController.m

#import "ViewController.h"

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    // UIViewの生成
    UIView *uv = [[UIView alloc] init];
    uv.frame = CGRectMake(0, 0, 200, 200);
    uv.center = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
    uv.backgroundColor = [UIColor redColor];
    [self.view addSubview:uv];
}

@end

ビルドして実行すると、作成したUIViewが表示される。

上記画像を200%拡大表示してみる。

まだアフィン変換前なので、アンチエイリアス処理が掛かっていなくても綺麗に表示されている。

今度は先ほど実装したUIViewにアフィン変換処理を掛ける。
赤字の部分がポイント箇所。

◎ViewController.m

#import "ViewController.h"

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    // UIViewの生成
    UIView *uv = [[UIView alloc] init];
    uv.frame = CGRectMake(0, 0, 200, 200);
    uv.center = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
    uv.backgroundColor = [UIColor redColor];
    [self.view addSubview:uv];
    
    // アフィン変換
    CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI * 30.0 / 180.0f);
    uv.transform = CGAffineTransformTranslate(transform, 0.0, 0.0);
    uv.bounds = CGRectMake(0, 0, 200, 200);
}

@end

ビルドして実行すると、アフィン変換されたUIViewが表示される。

上記画像を200%拡大表示してみる。

アンチエイリアス処理が掛かっていないため縁がギザギザして汚い。

いよいよアンチエイリアス処理を実装していく。

info.plistに、新たに以下をAdd Rowする。

　Key: Renders with edge antialisasing
　Type: Boolean
　Value: YES

以上でアンチエイリアス処理の追加は完了。

「Renders with edge antialisasing」は、縁をアンチエイリアスしてレンダリングしてくれるKey値。

知っていれば非常に簡単！

リビルド＆再実行してアンチエイリアス処理が掛かっているか確認する。

上記画像を200%拡大表示してみる。

最後に、アンチエイリアス処理適用前（左画像）と、アンチエイリアス処理適用後（右画像）の比較画像。

明らかに違っている。

若干ギザギザが気になるけど、今回はこれで良しとしようかな。

----------
サンプルソース：https://github.com/tetsuco/SampleViewAntialisasing

成長の果実

不完全でも良いから前に進む。

UIViewやUIImageViewにアンチエイリアスをかける