rounded corners on NSView using NSBezierPath are drawn badly

Question

In my ViewController's main NSView, I override the func drawRect(dirtyRect: NSRect) method to implement rounded corners on my main view using NSBezierPath. In that same method I also designate the gradient background of my main view.

override func drawRect(dirtyRect: NSRect) {

    let path: NSBezierPath = NSBezierPath(roundedRect: self.bounds, xRadius: 18.0, yRadius: 18.0)
    path.addClip()

   let gradient = NSGradient(startingColor: NSColor(hexColorCode: "#383838"), endingColor: NSColor(hexColorCode: "#222222"))
   gradient.drawInRect(self.frame, angle: 90)
}

The problem that arises is illustrated in the following image:

The image shows one of the views corners. The rounding of corners is only partially successful, as there still remains a white corner sticking out beyond the window's rounded corners.

If anyone has a better method of setting a window's corner radius I would be open to such suggestions. I have done a lot of research on the matter, however this solution appears to be the simplest.

Any advice on how to fix this issue is greatly appreciated.

how would i go about that? `NSColor.clearColor().set()` does not help... — Jonathan H., Jun 20 '15 at 04:08
Sorry, I was thinking of the `backgroundColor` property of `UIView` in iOS. I'm not sure if there is something similar for `NSView`. — rmaddy, Jun 20 '15 at 04:11
This may help someone find an answer to this question. I've noticed that if you increase the corner radius higher than half the height, the problem disappears. — Luke Carbis, Nov 02 '15 at 11:51

score 3 · Accepted Answer · answered Jun 20 '15 at 04:22

3

You should do the following on your NSWindow instance:

[window setOpaque:NO];
[window setBackgroundColor:[NSColor clearColor]];

and draw needed shape.

And check this article.

answered Jun 20 '15 at 04:22

c-smile

26,734
7
59
86

score 2 · Answer 2 · answered Nov 02 '15 at 12:09

I found a solution, by using a Sublayer.

class StyledButton: NSView {
    let roundLayer: CALayer = CALayer()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        setup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    func setup() {
        self.wantsLayer = true
        self.layer?.addSublayer(roundLayer)
        roundLayer.frame = self.bounds
        roundLayer.cornerRadius = 3
        roundLayer.backgroundColor = NSColor.redColor().CGColor
    }
}

rounded corners on NSView using NSBezierPath are drawn badly

2 Answers2

Linked