mac开发系列26:NSView实现圆角效果

设计稿中常常要求实现圆角效果,这样才能体现mac ui的特色。NSView默认是尖角的,要想实现圆角效果,最直观的做法是,在xib文件的基础上,加一层layer,再设置layer的cornerRadius属性,代码如下:

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

然而实践证明,上述使用xib的方式,并不能很好地达到预期。原有的尖角还是若隐若现,特别是在某些背景view的衬托下,就更加明显了。
行之有效的方法是,不用xib,自己实现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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,315评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,241评论 4 61
  • 财产分割,这四个字在离婚的时候才会产生的问题吧,! 关于夫妻财产分割问题,是怎么处理的? 我的一个十几年的闺蜜曾...
    我是一朵傲娇傲娇的小花阅读 353评论 0 0
  • 一位婆婆70岁了,又是一个跟女儿吵架闹翻,跑到已婚儿子家的晚上。 婆婆的女儿有癫痫(这里本地叫母猪疯),这个病...
    Vicky靈氣阅读 180评论 0 0
  • 牡丹花盛开 是大自然选择了他 牡丹花凋谢 依然是大自然选择了他 美景当前 牡丹花无论它开抑或凋谢 自当醉意人生 大...
    Ling_00阅读 205评论 2 8