libro
www.tuyano.com
初心者のためのiphone/ipadプログラミング入門

Core Graphicsを更に使いこなそう! (3/6)

作成:2011-04-18 07:54
更新:2011-04-18 08:05

■イメージの反転問題

では、イメージを画面に描画してみましょう。これは、mySampleViewdrawRect:メソッドを修正すればよいでしょう。

下のリスト欄に、簡単なサンプルをあげておきました(drawRect:修正(1)のほう)。これを記述して実行してみましょう。sample.jpgのイメージが画面に表示されます! ……ただし、よくイメージが上下逆になってますが……。前に、テキストの描画で起こったのと同じ現象が、ここでも起こってしまっています。

この問題については次に説明するとして、まずはイメージの描画の基本的な流れについて説明しておきましょう。まずは、CGContextRefを取得した後、描画に必要な情報として、表示するUIImageのサイズを取り出しておきます。
CGContextRef context = UIGraphicsGetCurrentContext();
CGSize s = [myimg size];
サイズは、CGSizeという構造体として扱われます。UIImageの「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行の文が追加されています。これでイメージをもとに戻った状態で描画できるようになります。ここで何をやっているのか?については、とりあえず今は深く考えないでください。「とりあえずこう書けばいいんだ」とだけ理解しておきましょう。

※プログラムリストが表示されない場合

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プログラミング入門」に戻る