Cocoaの日々

[前回]Cocoaの日々: Bezelボタンを作る［05］タッチしてon/offを切り替える

今回は画像を表示する。

画像表示

まずプロパティを追加する。

@property (nonatomic, retain) UIImage* image;

次に描画コードを追加する。

- (void)drawImageOnContext:(CGContextRef)context offset:(CGPoint)offset
{
 if (self.image) {
  CGRect buttonFrame = [self bounds];
  CGRect imageFrame = CGRectInset(buttonFrame, IMAGE_PADDING, IMAGE_PADDING);
  imageFrame.origin.x += offset.x;
  imageFrame.origin.y += offset.y;

  [self.image drawInRect:imageFrame];
 }
}

offset はボタンの状態（浮き出ているのか凹んでいるのか）によって画像の位置を微調整する。そうしないと画像の位置が固定で枠だけが浮き出たり凹んだりしてして不自然な感じなる。

画像は次のものをサンプルで用意した。
実行してみよう。
押すと浮き出る。
いい感じだ。


なお画像の描画に CGContextDrawImage() を使うこともできるが、引数として渡す UIImage.CGImage が座標系の違いにより上下反転(flip)したものになってしまう。
[例]

CGContextDrawImage(context, imageFrame, self.image.CGImage);

この点、-[UIImage drawInRect:] を使うと座標系の違いを気にしなくて良い。

参考情報

CGContextDrawImage draws image upside down when passed UIImage.CGImage - Stack Overflow

CGContextDrawImage と -[UIImage drawInRect:] の件

(旧) Cocoaの日々: NSImage の isFlipped/setFlipped: が Deprecated
※この例は CGAnffineTransform ではなく NSAffineTransformを使っている。

補間方法を指定してUIImageを縮小する(1) - tosh-tの日記
画像を縮小する時の補完方法について。