YoheiM技術やらずに終われまテン

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

こんにちは、@yoheiMuneです。

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

f:id:yoheiM:20111020200107j:image





アフィン変換とは

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

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

wikipedia:アフィン写像

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

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

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





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

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

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

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

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

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




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

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

- (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;
}

アフィン変換と指のジェスチャーを組み合わせて、ピンチジェスチャーやドラッグジェスチャーで画像の移動や拡大を行う事も可能です。

以下で、試してみたので、もしよければご覧頂けると幸いです。






最後に

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

以下は関連サイトです。参考になれば幸いです。