問題
在進行今天的內(nèi)容之前箫踩，首先我想問一個問題：下圖中傻工，藍色選擇框與紅色選擇框除顏色鲜戒、大小外有何不同？（我會在后文揭曉答案）
圖1
目標
本文今天要討論的是：在Mac OS X下粟按，如何實現(xiàn)矩形的部分圓角诬滩。
比如這樣：
圖2
或者這樣：
圖3
解決方案
要想實現(xiàn)上圖樣式，有兩種解決方案灭将。
方案1:蠢萌描點法
蠢萌描點法實現(xiàn)圖2的原理圖如下：
蠢萌描點法原理圖
如上圖所示疼鸟，首先確定整個矩形的的幾個特殊點，然后通過CGContextAddLineToPoint來實現(xiàn)繪制庙曙。
核心代碼
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
CGMutablePathRef path = CGPathCreateMutable();
CGContextRef cr = [[NSGraphicsContext currentContext] graphicsPort];
CGContextAddPath(cr, path);
//為了照顧視力不好的童鞋空镜，我將圖2的坐標擴大了10倍。
//順時針將坐標填充入?yún)?shù)即可
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);
}
效果
蠢萌描點法效果
根據(jù)寫代碼來看捌朴，蠢萌描點法手法過于粗糙吴攒，我不會告訴你在實際項目中坐標花了我大半天時間去計算。（真的是半天Ｄ衅臁）
So....方案二騰空出世舶斧！
方案二：猥瑣遮掩法
猥瑣遮蓋法實現(xiàn)圖3的原理如下：
猥瑣遮蓋法原理圖
看上去極易操作，代碼極易簡潔察皇，符合我一貫的代碼美學風格茴厉，完美，所以接下來.....我們繼續(xù)算坐標什荣！(狗頭)
image.png
核心代碼
- (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];
}
效果圖
猥瑣遮掩法實現(xiàn)圖2效果圖
結(jié)語
那么圖1中矾缓，兩個選擇框究竟有什么區(qū)別呢，如圖所示：
不同
搞了這么多花里胡哨稻爬，終于滿足了美工姐姐的奇葩需求嗜闻，完美！
（需要項目代碼的同學桅锄，請私聊我琉雳。）
