【绘图案例-带圆环的图片-圆环 Objective-C语言】

一、接下来，我们来讲一下带圆环的图片

1.带圆环的图片，大概就是这个效果，

首先，这个蓝色的，是我们整张图片的大小，

然后呢，这个粉色的，就是一个圆环，

然后呢，里边儿，有一个圆形的一个图片，

这个就是我们综合类型的一个练习了，我们有：

1）开启图片类型的上下文

2）画普通的一个线条儿

3）画基本的一个图形

4）设置样式、设置线宽、

5）画这个图片

6）裁剪区域

实际上，都有啊，

2.好，然后，这个里边，我们最终的目的，是要获取一张图片

所以呢，我们还是要用图片类型的上下文，来做，这是一定的，

在做之前，先给大家看一幅图，

我们先把这一幅图，

左上角是最终的效果，

然后呢，我们先把这些数字，算明白了，然后再去做，因为这个里边儿，涉及到很多计算的问题，我的思路呢，是这个样子的，

1）最外面，是整个图片的宽度，然后呢，我会在 里边儿，先画一个灰色的圆，然后呢，给它设置线宽，这个线宽呢，是10，

2）接下来，里边这个红色的内圆，内圆是我到时候显示头像的这一部分，无视这四个角，也就是说，我这个图片和这个整个的这张图片的间距，实际上，是有一个10的距离的，然后，我们来算一下啊，

3）假如说，这张头像，的宽度和高度，是180，乘，180，

那么，上下文的宽、高、是多少，我图片，距离最左边，有一个10的距离，距离最右边，是不是也有一个10的距离，

也就是说，我这个图片，假如说，是180，乘，180，的情况下，那么我，待会儿去开启上下文的时候，就应该在宽和高各加上两个10的距离，

也就是说，我待会儿开启上下文的时候，应该让这个上下文，变成200，乘，200，

接下来，如果我这个图片是180，乘，180，上下文呢，是200，乘，200，那么请问，这个灰色的圆的半径，是多少，

95，吧，

因为，我现在要设置线宽是10，我应该是左边加5，右边加5，对不对

所以呢，这样加起来，才是10，吗，所以，我这个半径，应该是在95的位置，应该整好是在这个上下文，和这个图片，中间儿这一块儿，画这么一个圆，也就是说，这个灰色的这个圆环的半径啊，应该是95，

好，那里面这个红色的内圆的半径，是多少，就是90吧，就是图片的一半儿吗，

我们把这些东西，都搞清了啊，

也就是说，下面这几个数字，我都写了，

假如说，这个图片，是180，乘，180的话，那它宽度的一半儿，就是90，然后呢，这个内圆，里边儿，我显示的这个图片的内容，也是90，跟这个图片是一样的，然后呢，外面这个圆环，看到这蓝色的线了吗，

这个蓝色的线啊，也就是我正经的一个半径，它的半径，应该是95，

然后呢，你在给它设置线宽为10，的时候，它左边儿会加5，右边儿会加5，里边儿会加5，外边儿会加5，就是这样的一个意思啊，它是95的，

然后呢，这个上下文，是根据你这儿来的，然后，左右、上下、各加上20，各加上两个线宽，然后呢，这个上下文，就相当于是200，乘200，

我们把这个数据算清楚了啊，然后呢，我们来做，

3.新建一个项目，Name：