フェンリル

Developer's Blog

パキッとした描画

iOS では座標を浮動小数点型(CGFloat)で指定します。アンチエイリアスのかかった美しい表示のために必要な機構ですが、くっきりとした(パキッとした)描画を行うには少しコツがいります。

例えば、CGContext を使って (100, 100) から (200, 100) へ太さ1ピクセルの黒100%のラインを引く際、そのままコードにすると次のようになります。

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat x, y;
[[UIColor blackColor] set];
CGContextSetLineWidth(ctx, 1.0);

x = 100;
y = 100;
CGContextMoveToPoint(ctx, x, y);
CGContextAddLineToPoint(ctx, x + 100, y);
CGContextStrokePath(ctx);

しかし、このようにするとドットとドットの間に1ピクセルの線を引くことになり、アンチエイリアスが効いて実際には太さ2ピクセル、黒50%のラインが表示されてしまいます。整数値の座標は、ドットの間を意味するためです。これを回避するには、ラインがドットの真ん中を通るように座標を調整してやります。

CGContextMoveToPoint(ctx, x, y + 0.5);
CGContextAddLineToPoint(ctx, x + 100, y + 0.5);
CGContextStrokePath(ctx);

表示結果は以下のようになります。上が前者、下が後者の方法です。

drawing example

このテクニックは、矩形や他の複雑な図形を描画する時にも有効ですので、役に立ててください。

関連記事

Facebook コメント

コメント

Tweets that mention パキッとした描画 « Elegant Apps Developers -- Topsy.com2010年11月25日 16:07

[...] This post was mentioned on Twitter by Yasumasa Ashida, Fenrir Inc. [iPhone]. Fenrir Inc. [iPhone] said: Elegant Apps Developers に記事を追加しました。今日は「パキッとした描画」です。座標指定を工夫してクッキリ、シャープなラインを引きましょう。 http://bit.ly/dZahYj #EADev [...]

PHPerなら知っておいて損はない10の関数 : アシアルブログ と10件… | プログラム、いろいろ。2010年11月26日 0:31

[...] – O’Reilly Japan Community Blogパキッとした描画 ? Elegant Apps Developers「プログラマ」と「10冊」が多かったのでまとめてみた – [...]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。