問題

在進行今天的內容之前，首先我想問一個問題：下圖中，藍色選擇框與紅色選擇框除顏色、大小外有何不同？（我會在後文揭曉答案）

目標

本文今天要討論的是：在Mac OS X下，如何實現矩形的部分圓角。

比如這樣：

或者這樣：

解決方案

要想實現上圖樣式，有兩種解決方案。

方案1:蠢萌描點法

蠢萌描點法實現圖2的原理圖如下：

如上圖所示，首先確定整個矩形的的幾個特殊點，然後通過CGContextAddLineToPoint來實現繪制。

核心代碼

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGContextRef cr = [[NSGraphicsContext currentContext] graphicsPort];
    
    CGContextAddPath(cr, path);
    //為了照顧視力不好的童鞋，我將圖2的坐標擴大了10倍。
    //順時針將坐標填充入參數即可
    CGContextMoveToPoint(cr, 0, 0);
    CGContextAddLineToPoint(cr, 0, 150);
    CGContextAddArcToPoint(cr,
                           0, 180,
                           30, 180,
                           30);
    CGContextAddLineToPoint(cr, 270, 180);
    CGContextAddArcToPoint(cr,
                           300, 180,
                           300, 150,
                           30);
    CGContextAddLineToPoint(cr, 300, 0);
    CGContextAddLineToPoint(cr, 0, 0);
    
    CGContextSetRGBFillColor(cr, 255.0/255.0, 0.0/255.0, 0.0/255.0, 1);
    CGContextDrawPath(cr, kCGPathFill);
    
    CGPathRelease(path);
}
 

效果

根據寫代碼來看，蠢萌描點法手法過於粗糙，我不會告訴你在實際項目中坐標花了我大半天時間去計算。（真的是半天！）
So…方案二騰空出世！

##方案二：猥瑣遮掩法
猥瑣遮蓋法實現圖3的原理如下：

看上去極易操作，代碼極易簡潔，符合我一貫的代碼美學風格，完美，所以接下來…我們繼續算坐標！(狗頭)

核心代碼

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    NSRect originalRect = NSMakeRect(0, 0, 300, 180);
    NSRect coverRect = NSMakeRect(0, 150, 300, 30);
    
    NSColor *red = [NSColor redColor];
    [red setFill];
    
    //圓角矩形
    NSBezierPath *originalPath = [NSBezierPath bezierPathWithRoundedRect:originalRect xRadius:30 yRadius:30];
    [originalPath fill];
    
    //遮掩矩形
    NSBezierPath *coverPath = [NSBezierPath bezierPathWithRect:coverRect];
    [coverPath fill];
}
 

效果圖

結語

那麽圖1中，兩個選擇框究竟有什麽區別呢，如圖所示：

搞了這麽多花裏胡哨，終於滿足了美工姐姐的奇葩需求，完美！
（需要項目代碼的同學，請在簡書私聊我。）

Mac OS X下實現矩形部分圓角