Core Graphicsを更に使いこなそう! (3/6)
作成:2011-04-18 07:54
更新:2011-04-18 08:05
更新:2011-04-18 08:05
■イメージの反転問題
では、イメージを画面に描画してみましょう。これは、mySampleViewのdrawRect:メソッドを修正すればよいでしょう。
下のリスト欄に、簡単なサンプルをあげておきました(drawRect:の修正(1)のほう)。これを記述して実行してみましょう。sample.jpgのイメージが画面に表示されます! ……ただし、よくイメージが上下逆になってますが……。前に、テキストの描画で起こったのと同じ現象が、ここでも起こってしまっています。
この問題については次に説明するとして、まずはイメージの描画の基本的な流れについて説明しておきましょう。まずは、CGContextRefを取得した後、描画に必要な情報として、表示するUIImageのサイズを取り出しておきます。
このCGImageは構造体で、ビットマップイメージに関する各種の情報を管理するものです。これを引数に指定して描画を行います。扱い方自体は、そう難しくはありませんね。
では、「描いた図形が上下反転する」という問題についてです。これを解決するにはどうすればいいのか。――一番、簡単なのは、「イメージを上下逆にして用意しておく」というものですね。(いや、冗談ではなくて。Appleが配布するサンプルを見ると、本当にイメージを逆にして描画するようなものが用意されています)
そうではなくて、イメージをそのまま(上下が逆にならないように)描く方法はないのか。まぁ、ないわけではありません。下のリスト欄に修正メソッドを掲載しておきました(drawRect:メソッドの修正(2)のほう)。これで、上下が逆にならずに表示されるようになります。
ここでは、★マーク以降の4行の文が追加されています。これでイメージをもとに戻った状態で描画できるようになります。ここで何をやっているのか?については、とりあえず今は深く考えないでください。「とりあえずこう書けばいいんだ」とだけ理解しておきましょう。
下のリスト欄に、簡単なサンプルをあげておきました(drawRect:の修正(1)のほう)。これを記述して実行してみましょう。sample.jpgのイメージが画面に表示されます! ……ただし、よくイメージが上下逆になってますが……。前に、テキストの描画で起こったのと同じ現象が、ここでも起こってしまっています。
この問題については次に説明するとして、まずはイメージの描画の基本的な流れについて説明しておきましょう。まずは、CGContextRefを取得した後、描画に必要な情報として、表示するUIImageのサイズを取り出しておきます。
CGContextRef context = UIGraphicsGetCurrentContext();サイズは、CGSizeという構造体として扱われます。UIImageの「size」というプロパティの値を取り出すことで、このようにイメージの大きさが得られます。
CGSize s = [myimg size];
CGRect r = CGRectMake(20, 20, s.width, s.height);続いて、描画する領域をCGRect構造体の値として用意します。これはCGRectMake関数を使って作成します。これで描画の準備は完了です。後は描画をするだけです。
CGContextDrawImage(context, r, [myimg CGImage]);CGContextDrawImageが、描画を行うための関数です。第1引数には例のごとくCGContextRefを指定し、代2引数には描画する領域を示すCGSize、そして第3引数には描画するイメージを用意します。これは、UIImageをそのまま指定するのではないので注意が必要です。UIImageから「CGImage」というプロパティの値を取り出し、これを指定します。
このCGImageは構造体で、ビットマップイメージに関する各種の情報を管理するものです。これを引数に指定して描画を行います。扱い方自体は、そう難しくはありませんね。
■上下を反転させるには?
では、「描いた図形が上下反転する」という問題についてです。これを解決するにはどうすればいいのか。――一番、簡単なのは、「イメージを上下逆にして用意しておく」というものですね。(いや、冗談ではなくて。Appleが配布するサンプルを見ると、本当にイメージを逆にして描画するようなものが用意されています)
そうではなくて、イメージをそのまま(上下が逆にならないように)描く方法はないのか。まぁ、ないわけではありません。下のリスト欄に修正メソッドを掲載しておきました(drawRect:メソッドの修正(2)のほう)。これで、上下が逆にならずに表示されるようになります。
ここでは、★マーク以降の4行の文が追加されています。これでイメージをもとに戻った状態で描画できるようになります。ここで何をやっているのか?については、とりあえず今は深く考えないでください。「とりあえずこう書けばいいんだ」とだけ理解しておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※drawRect:の修正(1) - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGSize s = [myimg size]; CGRect r = CGRectMake(20, 20, s.width, s.height); CGContextDrawImage(context, r, [myimg CGImage]); } ※drawRect:メソッドの修正(2) - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGSize s = [myimg size]; CGRect r = CGRectMake(20, 20, s.width, s.height); // ★ここから追加した文 CGAffineTransform affine = CGAffineTransformIdentity; affine.d = -1.0f; affine.ty = 20 + 20 + s.height; CGContextConcatCTM(context, affine); CGContextDrawImage(context, r, [myimg CGImage]); }
※関連コンテンツ
「初心者のためのiphone/ipadプログラミング入門」に戻る