mac開發(fā)系列26:NSView實現(xiàn)圓角效果

設計稿中常常要求實現(xiàn)圓角效果,這樣才能體現(xiàn)mac ui的特色。NSView默認是尖角的,要想實現(xiàn)圓角效果,最直觀的做法是,在xib文件的基礎上,加一層layer,再設置layer的cornerRadius屬性,代碼如下:

    self.view.wantsLayer = YES;
    self.view.layer.cornerRadius = VIEW_RADIUS;

然而實踐證明,上述使用xib的方式,并不能很好地達到預期。原有的尖角還是若隱若現(xiàn),特別是在某些背景view的襯托下,就更加明顯了。
行之有效的方法是,不用xib,自己實現(xiàn)view,并重寫view的drawRect方法,利用Core Graphics(縮寫CG)把圓角畫出來,代碼如下:

    - (void)drawRect:(NSRect)dirtyRect {
       [super drawRect:dirtyRect];
       CGContextRef context = [NSGraphicsContext currentContext].CGContext; // Core Graphics上下文,其實就是張畫布 
       CGFloat minx = CGRectGetMinX(dirtyRect), midx =    CGRectGetMidX(dirtyRect), maxx = CGRectGetMaxX(dirtyRect);
       CGFloat miny = CGRectGetMinY(dirtyRect), midy = CGRectGetMidY(dirtyRect), maxy = CGRectGetMaxY(dirtyRect);
       CGContextMoveToPoint(context, minx, midy); // 設置繪制起點為(minx, midy) 
       CGContextAddArcToPoint(context, minx, miny, midx, miny, VIEW_RADIUS); // 繪制view左下圓角 
       CGContextAddArcToPoint(context, maxx, miny, maxx, midy, VIEW_RADIUS); // 繪制view右下圓角 CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, VIEW_RADIUS); // 繪制view右上圓角
       CGContextAddArcToPoint(context, minx, maxy, minx, midy, VIEW_RADIUS); // 繪制view左上圓角 
       CGContextClosePath(context); CGContextSetFillColorWithColor(context, backGroundColor); //填充view的背景顏色 
       CGContextFillPath(context);}

繪制代碼有些難以理解,具體參考如下鏈接:
http://stackoverflow.com/questions/8709794/when-drawing-an-arc-using-cgcontextaddarctopoint-what-does-x1-y1-and-x2-y2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,287評論 25 708
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,232評論 4 61
  • 財產(chǎn)分割,這四個字在離婚的時候才會產(chǎn)生的問題吧,! 關于夫妻財產(chǎn)分割問題,是怎么處理的? 我的一個十幾年的閨蜜曾...
    我是一朵傲嬌傲嬌的小花閱讀 352評論 0 0
  • 一位婆婆70歲了,又是一個跟女兒吵架鬧翻,跑到已婚兒子家的晚上。 婆婆的女兒有癲癇(這里本地叫母豬瘋),這個病...
    Vicky靈氣閱讀 180評論 0 0
  • 牡丹花盛開 是大自然選擇了他 牡丹花凋謝 依然是大自然選擇了他 美景當前 牡丹花無論它開抑或凋謝 自當醉意人生 大...
    Ling_00閱讀 205評論 2 8