Mac OS X V10.5 から Application Kit Functions に NSDrawThreePartImage と NSDrawNinePartImage という関数が用意された。今回はこれを試してみた。
NSDrawThreePartImage
関数のシグネチャは次の通り。
void NSDrawThreePartImage(NSRect frame, NSImage *startCap, NSImage *centerFill, NSImage *endCap, BOOL vertical, NSCompositingOperation op, CGFloat alphaFraction, BOOL flipped );
（参照）Mac Dev Center: Application Kit Functions Reference
この関数は単一方向に伸縮するような絵を描くのに使うようだ。左端、右端、そしてその間の画像を用意すると任意の幅の絵を描く。伸縮するボタンやスライダ、スクロールバーなどに使えそうだ。
（イメージ） +--------+--------------------+-------+ |startCAp| centerFill |endCap | | | ← 伸縮 → | | +--------+--------------------+-------+
vertical フラグが YES の場合は垂直方向、NO の場合は水平方向で描画される。
サンプルを作ってみた。
画像は Safari4 の Resources に入っているものを参照した（※サンプルソースコードには付属していない）。
コードは、カスタムビューに描画コードを載せて、デフォルトのウィンドウのContentViewへ貼り付けた。
CustomView.m
- (void)drawRect:(NSRect)dirtyRect {
// Drawing code here.
if (!startCap) {
NSString* safariPath = @"/Applications/Safari.app/Contents/Resources";
startCap = [[NSImage alloc] initWithContentsOfFile:[safariPath stringByAppendingPathComponent:@"PurplePopUpLeft.png"]];
centerFill = [[NSImage alloc] initWithContentsOfFile:[safariPath stringByAppendingPathComponent:@"PurplePopUpFill.png"]];
endCap = [[NSImage alloc] initWithContentsOfFile:[safariPath stringByAppendingPathComponent:@"PurplePopUpRight.png"]];
}
CGFloat margin = 20.0;
NSRect frame = [self frame];
frame.origin.x += margin;
frame.origin.y += margin;
frame.size.width -= margin*2.0;
frame.size.height = [centerFill size].height;
NSDrawThreePartImage(frame, startCap, centerFill, endCap, NO, NSCompositeSourceOver, 1.0, NO);
}
まず実行直後。
frame を画像サイズより小さくするとどうなるのか？
画質はともかくとして縮小、拡大しても可能な限り形態を保ったまま描画してくれるようだ。
NSDrawNinePartImage
名前から察するにこれは先程の関数の縦横両方向バージョンのようだ。引数もその分多い。
void NSDrawNinePartImage(NSRect frame, NSImage *topLeftCorner, NSImage *topEdgeFill, NSImage *topRightCorner, NSImage *leftEdgeFill, NSImage *centerFill, NSImage *rightEdgeFill, NSImage *bottomLeftCorner, NSImage *bottomEdgeFill, NSImage *bottomRightCorner, NSCompositingOperation op, CGFloat alphaFraction, BOOL flipped );
（参照）Mac Dev Center: Application Kit Functions Reference
これもサンプルを作ってみた。
適当な画像がみつからなかったので Bitmemo の画像を使ってみた（※サンプルソースコードにコピーを添付）
CutomView.m
- (BOOL)isFlipped
{
return YES;
}
- (void)drawRect:(NSRect)dirtyRect {
// Drawing code here.
[[NSColor lightGrayColor] set];
NSRectFill(dirtyRect);
if (!topLeftCorner) {
topLeftCorner = [[NSImage imageNamed:@"frame_top_left"] retain];
topEdgeFill = [[NSImage imageNamed:@"frame_top_mid"] retain];
topRightCorner = [[NSImage imageNamed:@"frame_top_right"] retain];
leftEdgeFill = [[NSImage imageNamed:@"frame_mid_left"] retain];
centerFill = [[NSImage imageNamed:@"frame_mid_mid"] retain];
rightEdgeFill = [[NSImage imageNamed:@"frame_mid_right"] retain];
bottomLeftCorner = [[NSImage imageNamed:@"frame_bottom_left"] retain];
bottomEdgeFill = [[NSImage imageNamed:@"frame_bottom_mid"] retain];
bottomRightCorner = [[NSImage imageNamed:@"frame_bottom_right"] retain];
NSLog(@"%@", bottomRightCorner);
}
CGFloat margin = 20.0;
NSRect frame = [self frame];
frame.origin.x += margin;
frame.origin.y += margin;
frame.size.width -= margin*2.0;
frame.size.height -= margin*2.0;
NSDrawNinePartImage(frame, topLeftCorner, topEdgeFill, topRightCorner, leftEdgeFill, centerFill, rightEdgeFill, bottomLeftCorner, bottomEdgeFill, bottomRightCorner, NSCompositeSourceOver, 1.0, YES);
}
実行するとこんな感じ。
出た。ウィンドウの拡大縮小に合わせて描画される。
縮小しすぎると表示が崩れる。一定以上に小さくならないように制限が必要。
なお top-left と bottom-right corner image は端の大きさを決めるの使われているので、例えば bottomRightCorner が nil だったりすると右と下の画像はまったく表示されない。
（関連情報）
NSDrawNinePartImage
あらかじめ枠となる画像を１枚用意しておき、それを９分割して NSDrawNinePartImage で使う方法が書かれていた。面白い。
Re: NSDrawNinePartImage draws slowly in CALayer
CALayer で使うと遅いという話題。シンプルな NSView で使っている限りでは遅くはなかった（v10.6）。
ソースコード
GitHubからどうぞ。
NSDrawNinePartImageStudy at master from xcatsan's SampleCode - GitHub
NSDrawThreePartImageStudy at master from xcatsan's SampleCode - GitHub
