Mac OS X下實現矩形部分圓角
問題
在進行今天的內容之前,首先我想問一個問題:下圖中,藍色選擇框與紅色選擇框除顏色、大小外有何不同?(我會在後文揭曉答案)
目標
本文今天要討論的是:在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中,兩個選擇框究竟有什麼區別呢,如圖所示:
搞了這麼多花裡胡哨,終於滿足了美工姐姐的奇葩需求,完美!
(需要專案程式碼的同學,請私聊我。)
相關文章
- css3實現的矩形圓角切角效果CSSS3
- canvas 繪製圓角矩形Canvas
- SVG 繪製圓角矩形SVG
- css圓角矩形邊框CSS
- 滑鼠懸浮可以實現圓角矩形明亮變化效果
- visio圓角矩形怎麼改變圓角大小
- css3實現底部帶有箭頭的圓角矩形效果CSSS3
- UIImageView 實現圓角效果UIView
- 微信小程式 canvas圓角矩形的繪製微信小程式Canvas
- canvas繪製圓角矩形程式碼例項Canvas
- Android 圓角、圓形 ImageView 實現AndroidView
- Mac OS X下如何使用OpenGLMac
- canvas-座標系、圓角矩形、紋理、剪裁Canvas
- iOS開發_繪製圓角矩形虛線環iOS
- Mac OS XMac
- MAC OS X下建立iso檔案Mac
- Mac OS X 下搭建thrift環境Mac
- UIView 的部分圓角的設定UIView
- 原來 Canvas 也能直接繪製圓角矩形了Canvas
- Android Xfermode 實戰 實現圓形、圓角圖片Android
- css實現圓角按鈕效果CSS
- iOS 實現檢視指定圓角iOS
- css底部帶有三角形箭頭的圓角矩形效果CSS
- android 螢幕圓角實現方法Android
- 自定義drawable實現圓角圖片
- 自定義view實現圓角圖片View
- mac OS X下配置jdk環境變數MacJDK變數
- Glide實現圓角圖片,以及圓形圖片IDE
- qt如何將下拉框的框設定為圓角矩形QT
- Mac OS X 下檔名亂碼出現的原因和解決方法Mac
- Windows下虛擬機器安裝Mac OS X ----- VM12安裝Mac OS X 10.11Windows虛擬機Mac
- Mac OS X 驚現最危險木馬Mac
- 在相親原始碼開發中,如何實現圓角及特殊圓角的使用?原始碼
- 如何實現css漸變圓角邊框CSS
- Flutter 彩邊圓角 Container 的實現FlutterAI
- ios實現圖片圓角方式小計iOS
- CSS不用背景圖片實現優惠券樣式反圓角,凹圓角,反向半圓角,並且背景漸變CSS
- Mac OS X下搭建Android開發環境MacAndroid開發環境