Rounded NSImage corners in a NSButtonCell

Question

I have a NSMatrix with a couple of NSButtons in it which have no Text but are only images. One of the images is downloaded from the internet and I would like to have it rounded corners in my OS X application.

I found one answer which nearly is what I was looking for: How to draw a rounded NSImage but sadly it acts crazy when I use it:

// In my NSButtonCell subclass
- (void)drawImage:(NSImage*)image withFrame:(NSRect)imageFrame inView:(NSView*)controlView
{
    // [super drawImage:image withFrame:imageFrame inView:controlView];

    [NSGraphicsContext saveGraphicsState];

    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:imageFrame xRadius:5 yRadius:5];
    [path addClip];

    [image drawInRect:imageFrame fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1.0];

    [NSGraphicsContext restoreGraphicsState];
}

The problem is that if a image is partly transparent (PNG) then it is completly destroyed and I only see a couple of white pixels on a black background.

And if the image is not transparent then it gets the rounded corners but is rotated 180° and I don't know why.

Any suggestions?

Answer 1

You need to make sure you set the image's size correctly before drawing it, and you should use the NSImage method drawInRect:fromRect:operation:fraction:respectFlipped:hints: to ensure the image is drawn the correct way up:

- (void)drawImage:(NSImage*)image withFrame:(NSRect)imageFrame inView:(NSView*)controlView
{
    // [super drawImage:image withFrame:imageFrame inView:controlView];

    [NSGraphicsContext saveGraphicsState];

    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:imageFrame xRadius:5 yRadius:5];
    [path addClip];

    //set the size
    [image setSize:imageFrame.size];

    //draw the image
    [image drawInRect:imageFrame fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1.0 respectFlipped:YES hints:nil];

    [NSGraphicsContext restoreGraphicsState];
}

The image should draw correctly if you do this, even if it's a translucent PNG image.