2012/04/02更新

[iPhone] iPhoneで図形を描く。Quartz 2Dの初歩

このエントリーをはてなブックマークに追加      

久しぶりにiPhoneアプリケーションの実装に関するお話が書けるから嬉しい(*´∇`*)今日は、線や四角などの図形を描く為の仕組みである、Quartz 2Dの概要を学んだので、記載したいと思います。

f:id:yoheiM:20110630145003j:image




Quartz 2Dとは

iPhoneアプリでは、図形を描く方法は何通りかあります。一番簡単なのは、UIViewのdrawRect:を使った図形描画。それよりちょっと難しいけど、複雑な事が出来るのがQuartz 2DやCore Graphics。そして他にもOpen GL ESを使った描画。何種類かあります。

今回取り上げるのは、Quartz 2Dで、これは2次元(2D)の描画を行うことが出来る仕組みです。UIViewの機能では物足りない、そんな人は使ってみる価値がありそうです。




The Page

Quartz 2Dはpainter's Modelを採用しています。これは、絵を描く際に、絵を書いた上にどんどんと次の絵を描いていくモデルです。油絵とかの書き方なのでしょうか?そのため、複数の図形を描く際に、描く順番に注意しなければなりません。下図のように、描く順番によって最終的な絵の見え方が変わります。

f:id:yoheiM:20110630145004p:image

引用元:http://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/index.html




Graphics Context

Quartz 2Dを利用する場合には、Graphics Contextというものを使って絵や図を描きます。使ってというのは、Graphics Contextのオブジェクトを作成した後は、絵を描く関数の引数に指定して絵や図を描くという意味です。描いた後には、画像、PDF、bitmap、windowなど様々な場所へ出力出来るようです。ここは次回以降に詳しく。




Quartz 2D Coordinate System

ここ凄く重要だと思います。絵を描く際に、x座標、y座標、長さ、高さなどを指定するかと思いますが、その起点の位置と方向がQuartz 2Dは決まっています。

f:id:yoheiM:20110630145005p:image

引用元:http://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/index.html

数学で使う座標系と一緒ですね。左下が原点で、上や右に行くにつれてX,Yの値が大きくなる座標系です。UIViewや通常のWeb画面で使う座標系(左上が原点で下や右へ行くにつれて値が増加する)とは異なるので、注意です。なお、座標系はcurrent coordinate systemにて管理されているので、それを変更する事で、UIViewと同じ座標系を作成する事も一応可能です。

この座標系を意識せずに実装すると、写真が逆さまになったり、画像が表示されなかったりと思わぬ混乱に陥るかもしれません♪(´ε` )




最後に

今回はQuartz 2Dの基礎的な部分を学んだので、その記録でした。座標系がiPhoneの中で2種類あるのは驚きですね。間違えないように注意しなきゃ。

次はGraphics Contextについて詳しく学べたらいいな。







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。