パキッとした描画

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);

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

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