iPhoneで図形を描く。Quartz 2Dの初歩
こんにちは、@yoheiMuneです。
久しぶりにiPhoneアプリケーションの実装に関するお話が書けるから嬉しい(*´∇｀*)今日は、線や四角などの図形を描く為の仕組みである、Quartz 2Dの概要を学んだので、記載したいと思います。
Quartz 2Dとは
iPhoneアプリでは、図形を描く方法は何通りかあります。一番簡単なのは、UIViewのdrawRect:を使った図形描画。それよりちょっと難しいけど、複雑な事が出来るのがQuartz 2DやCore Graphics。そして他にもOpen GL ESを使った描画。何種類かあります。
今回取り上げるのは、Quartz 2Dで、これは2次元(2D)の描画を行うことが出来る仕組みです。UIViewの機能では物足りない、そんな人は使ってみる価値がありそうです。
The Page
Quartz 2Dはpainter's Modelを採用しています。これは、絵を描く際に、絵を書いた上にどんどんと次の絵を描いていくモデルです。油絵とかの書き方なのでしょうか？そのため、複数の図形を描く際に、描く順番に注意しなければなりません。下図のように、描く順番によって最終的な絵の見え方が変わります。
Graphics Context
Quartz 2Dを利用する場合には、Graphics Contextというものを使って絵や図を描きます。使ってというのは、Graphics Contextのオブジェクトを作成した後は、絵を描く関数の引数に指定して絵や図を描くという意味です。描いた後には、画像、PDF、bitmap、windowなど様々な場所へ出力出来るようです。ここは次回以降に詳しく。
Quartz 2D Coordinate System
ここ凄く重要だと思います。絵を描く際に、x座標、y座標、長さ、高さなどを指定するかと思いますが、その起点の位置と方向がQuartz 2Dは決まっています。
数学で使う座標系と一緒ですね。左下が原点で、上や右に行くにつれてX,Yの値が大きくなる座標系です。UIViewや通常のWeb画面で使う座標系（左上が原点で下や右へ行くにつれて値が増加する）とは異なるので、注意です。なお、座標系はcurrent coordinate systemにて管理されているので、それを変更する事で、UIViewと同じ座標系を作成する事も一応可能です。
この座標系を意識せずに実装すると、写真が逆さまになったり、画像が表示されなかったりと思わぬ混乱に陥るかもしれません♪(´ε｀ )
最後に
今回はQuartz 2Dの基礎的な部分を学んだので、その記録でした。座標系がiPhoneの中で2種類あるのは驚きですね。間違えないように注意しなきゃ。
次はGraphics Contextについて詳しく学べたらいいな。
以下、運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト
cooking_bot：料理情報をつぶやくTwitterアカウント
