[XCODE] 画像ビューとかを簡単に変形させる

こんにちは、@yoheiMuneです。

今日は、画像ビュー（UIImageView）などを、簡単に移動・拡大縮小・回転を行う、アフィン変換を学んだので、ブログに残しておきたいと思います。

アフィン変換とは

アフィン変換とは、wikiでは以下のように話が始まっています。

幾何学におけるアフィン写像（アフィンしゃぞう、英語: affine map）はベクトル空間（厳密にはアフィン空間）の間で定義される、平行移動を伴う線型写像である。

wikipedia:アフィン写像

はい。難しい。数学的なお話は、なかなか理解出来ない。色々と値を変化させると、その値によって、対象図形が移動したり、回転したり、大きくなったりするようです。

でも、良いんです。iPhoneアプリ開発では、アフィン変換用の便利な関数がたくさん用意されています。

それを使えば、簡単にできます。

iPhoneで用意されているアフィン変換

以下のような、関数たちがいます。

■アフィン変換を作成する関数

CGAffineTransformMakeRotation	回転用のアフィン変換を作成できます
CGAffineTransformMakeScale	拡大／縮小用のアフィン変換を作成できます
CGAffineTransformMakeTranslation	移動用のアフィン変換を作成できます
CGAffineTransformMake	回転、移動などをまぜて自分の好きなアフィン変換を作成できます

■アフィン変換を変更する関数

CGAffineTransformTranslate	移動量を変更することができます
CGAffineTransformScale	拡大率を変更することができます
CGAffineTransformRotate	回転率を変更することができます
CGAffineTransformInvert	現在のアフィン変換を反転させることができます
CGAffineTransformConcat	2つのアフィン変換値を組み合わせることができます

アフィン変換を使ってみた

アフィン変換を使って、移動、回転、縮小をしてみました。

- (void)translate {
  // x軸に10pt、y軸に10pt移動する
  imgView.transform = CGAffineTransformMakeTranslation(10.0f, 10.0f);	
}

- (void)rotate {
  // 90度回転する
  imgView.transform = CGAffineTransformMakeRotation(90f * M_PI / 180.0f);
}

- (void)scaleUp {
  // 縦横1.5倍にする
  imgView.transform = CGAffineTransformMakeScale(1.5f, 1.5f);
}

- (void)translate_and_rotate {

  CGAffineTransform t1 = CGAffineTransformMakeTranslation(10.0f, 10.0f);	
  CGAffineTransform t2 = CGAffineTransformMakeScale(1.5f, 1.5f);

  // 移動と回転を組み合わせてみた
  imgView.transform = CGAffineTransformConcat(t1, t2);
}

- (void) reset {
  // アフィン変換のかかっていない状態に戻す
  imgView.transform = CGAffineTransformIdentity;
}

最後に

画像とかの変形とかできると、ちょっと上級者っぽいですね。仕組みは簡単で良かったです(*´∇｀*)