強火で進め

このブログではプログラム関連の記事を中心に書いてます。

ほぼ日、MacのGUI - Image(画像の表示)

NSImage、Custom Viewのサンプルです。

(1) 新規ファイルを追加。「Objective-C NSView subclass」を選択し、「ShowImageView」という名称で作成する。
(2) 画像ファイル(ここでは yamasumire.jpg を使用)を追加。「グループとファイル」より「Resources」を右クリック。「追加」「既存のファイル」と選択し、 yamasumire.jpg を追加する。これによりコンパイル後にappファイル(本当はフォルダ)に画像ファイルが追加されます。
※実際に格納されているファイルを確認するには build/Release/Example.app を右クリックし、「パッケージの内容を表示」を選択して下さい。
(2) ShowImageView.m の drawRect: メソッドを以下の様に変更。

- (void)drawRect:(NSRect)rect {
    NSImage *image;
    // 実行ファイルにバンドルしてある画像ファイルのパスを取得
	NSString *path = [[NSBundle mainBundle]
						   pathForResource:@"yamasumire" ofType:@"jpg"];
    NSLog(path);
    // ファイルから読み込む。他にも指定URLから読み込む initWithContentsOfURL: メソッドがあります
    image = [[NSImage alloc] initWithContentsOfFile:path];
    [image dissolveToPoint:NSMakePoint(0, 0) fraction:1.0];
}

(2) xibファイルの編集。「グループとファイル」より「Resources」-「MainMenu.xib」の順で選択(※)。
Xcodeのバージョンによっては「MainMenu.nib」の場合があります。
(3) Libraryから「Cumstom View」を選択し、ウィンドウに配置する。

ウィンドウのサイズを変更すると分かりますが画像は左下に配置されています。これはCocoaでは左下を原点としてXは右方向、Yは上方向に増分するためです。

そのためウィンドウの左下から右に10、上に20の場所に描画したい場合は以下の様に記述します。

    [image dissolveToPoint:NSMakePoint(10, 20) fraction:1.0];

左上を原点とした描画を行う場合は以下の様に記述します。

	CGFloat y;
    NSRect bounds = [self bounds];
	y = bounds.size.height - [image size].height;
    [image dissolveToPoint:NSMakePoint(0, y) fraction:1.0];

Cocoaでサポートしている画像ファイル一覧はこちらを参照。

Cocoa Drawing Guide: Supported Image File Formats
http://developer.apple.com/documentation/Cocoa/Conceptual/CocoaDrawingGuide/Images/chapter_7_section_3.html#//apple_ref/doc/uid/TP40003290-CH208-BCIIFBJG

公式の解説はこちら。

NSSavePanel Class Reference
http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/Classes/NSImage_Class/Reference/Reference.html

日本語の解説が良い人はこちらのSatoshi Oomoriさんのページを参照下さい。

http://www.oomori.com/cocoafw/ApplicationKit/NSImage/index.html
※注記
http://www.oomori.com/cocodesu/index.html

ソースコードこちら