本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。本文仅作为个人学习记录使用，欢迎在许可协议范围内转载或使用，请尊重版权并且保留原文链接，谢谢您的理解合作。如果您觉得本站对您能有帮助，您可以使用RSS方式订阅本站，这样您将能在第一时间获取本站信息。

start

新年快乐啊，虽然在努力码cocoa drawing guide part4，不过短线更新个小的，怎么把NSImage画到圆圈里面。

我们都知道，NSImageView是四四方方的，丑死了。。。为了让我们的UI好看点，大家必定是下了很多苦功夫的啊，所以今天就分享一个非常普通而又实用的东西，把NSImage画到一个圆里面。其实之前google了好会儿了，觉得网上大家的方法都很麻烦，所以还是决定自己DIY了:)

效果如下：

这一篇的内容就刚好用到了drawing guide part4——图像的内容，我会告诉我我也参考了下PaintCode么:P

怎么做

一开始是想集成ImageView，然后在drawRect:方法里面把我想要的东西实现起来的，后来想想，这么做好麻烦的来，而且有点小题大做的感觉了，最后决定，创建一个NSImage然后把我们的图像绘制在圆圈里面。

那么，我们来看代码解析把

// 根据我们ImageView的大小创建一个NSImage来保存绘制后的图像
NSImage *circleImage = [[NSImage alloc] initWithSize:self.imageView.frame.size];

// 告诉cocoa，我要用这个image开刀了，让他准备好接收绘图命令
[circleImage lockFocus];

// 画个圆
NSBezierPath *circlePath = [NSBezierPath bezierPathWithOvalInRect:NSMakeRect(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height)];

// 因为后面我们就要对当前的图形上下文做操作了，所以先保存当前的图形状态
[NSGraphicsContext saveGraphicsState];

// 把我们刚刚画的那个圆添加到截取区域中，作为绘图的区域
[circlePath addClip];

// 下面两段drawInRect的代码只用取一段就可以了

// 绘制目标图像，使用NSCompositeSourceOver作为合成选项
// 也就是绘制结果是源图片（刚刚我们画的那个圈的区域）不透明的叠加在我们的image上，这样结果就是image被一个圈圈罩住了，圈里面看得见，全外面没了
[image drawInRect:NSMakeRect(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height) fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];

// 其实这里这样也可以，因为我们之前已经画了个圈作为截取区域了，那也就是说我们绘制的区域只有个圈了，不需要进行叠加也是可以的
[image drawInRect:NSMakeRect(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height)];

// 图形上下文操作结束，那么自然回复我们修改之前的图形上下文
[NSGraphicsContext restoreGraphicsState];

// 告诉cocoa我们画完了
[circleImage unlockFocus];

// 设置图片
self.imageView.image = circleImage;

就这样和谐的圆形头像就有了，如果要画在其他形状里面，只需要替换下上面代码中的circlePath，我们的路径是啥样的，这段代码就会把image画到啥样的形状里面。

end

自觉短小实用，特别是对我们这些初学者来说XDDDDD，上面用到了一些drawing guide part4的内容，当然也有前面几讲的内容，除了看Guide以外，多实验才是最有效的码农能力提高手段啊:)

ps.虽然以前想过有了PaintCode就可以搞定EveryThing了，不过看着他生成出来的代码还是想一行一行搞懂他到底在干什么，发现果然是知其所以然才更有意思。

最后欢迎大家订阅我的微信公众号 Little Code

公众号

公众号主要发一些开发相关的技术文章
谈谈自己对技术的理解，经验
也许会谈谈人生的感悟
本人不是很高产，但是力求保证质量和原创