Quartz2D之绘制一个简单的机器猫

学习iOS有一段时间了，在博客园也默默的潜水了两个月，见识了很多大神，收获不少。

今天整理笔记，发现忘记的不少，我感觉需要及时的整理一下了，同时也把做的小东西贴上来和大家分享一下。

最近学习了Quartz2D，一款二维绘图引擎，可以用于绘制各种图形、文字、图片等，并且具备裁剪、生成图片、自定义UI控件等功能，据说iOS很多UI控件都是通过它画出来的。

但是在美工如此强大的今天，并不需要利用Quartz2D画出多么美观的界面，而是利用它来做一些程序运行时美工无法实现或者相对麻烦的功能，比如动态绘图（涂鸦板、K线图等各种分析类图表）、裁剪图片、手势解锁等。

出于一个曾经美工的执念，我使用Quartz2D画了一个简单的机器猫头像，关于Quartz2D的基础绘制知识，博客园很多，我就直接贴出绘制过程了；

Quartz2D之绘制一个简单的机器猫

1、我是直接新建了一个view，直接在drawRect方法中取得图层上下文进行绘制，也可以直接创建一个基于位图的上下文，从上下文中取得制作完毕的UIImage对象。首先获取和view相关的图形上下文，设定线条样式，并且保存了一份在上下文栈中，以防后面需要用到。其中每个部分的位置参数，就不仔细说明了，简单计算和尝试即可，每个人都有自己的设置方法；注意要把描边厚度考虑进去，线段厚度设置方式是里外各增加相同厚度，我这里设置的线段厚度为4，比如大圆的实际半径为：我们设置的大圆半径加上2才是正确的，所以有些参数+-2；

-(void)drawRect:(CGRect)rect
{
    //获取上下文，no *；
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置线宽为4，即描边
    CGContextSetLineWidth(ctx, 4);
    //线条颜色为黑色
    [[UIColor blackColor]setStroke];
    //保存一份原始的上下文栈
    CGContextSaveGState(ctx);

2、开始画头部：头部由两个圆形组成。一个蓝色大圆，以及中心点靠下的白色小圆：

    //设置中心点，根据中心点设置参数
    CGFloat viewW = self.frame.size.width * 0.5;
    CGFloat viewH = self.frame.size.height * 0.5;
    //蓝色大圆，画圆我一般喜欢画一条360度的弧线，这样是通过设置圆心位置来决定圆的位置。直接采用画圆的方法是根据左上角的顶点来设定位置；
    CGContextAddArc(ctx, viewW, viewH, 150, 0, M_PI * 2, 0);
    //设置圆的填充色，我根据取色器的数据设置的
    [[UIColor colorWithRed:15 / 255.0 green:106 / 255.0 blue:169 / 255.0 alpha:1] setFill];
    //使用这个方法渲染，可以渲染出描边。
    CGContextDrawPath(ctx, kCGPathFillStroke);
    //小圆，圆心稍微向下，半径变小
    CGContextAddArc(ctx, viewW, viewH + 30, 115, 0, M_PI * 2, 0);
    [[UIColor whiteColor]setFill];
    CGContextDrawPath(ctx, kCGPathFillStroke);

3、画领带：

    //红色矩形，也可以直接画一条很粗的线段
    CGContextAddRect(ctx, CGRectMake(viewW - 125, viewH + 100, 250, 20));
    [[UIColor redColor]setFill];
    CGContextDrawPath(ctx, kCGPathFillStroke);

Quartz2D之绘制一个简单的机器猫效果；

4、画眼睛、眼珠。都是由圆形构成，位置设置需要计算一下子；眼睛是对称的，画好一个，把X值对称一下就行了

 //眼睛是椭圆的，采用的是画圆的方式，此时圆的位置由左上角决定；CGRectMake:前两个参数为左上角位置；后两个参数代表圆宽和长，设置不同参数形成椭圆；
    [[UIColor whiteColor]setFill];
    CGContextAddEllipseInRect(ctx, CGRectMake(viewW, viewH - 120, 50, 80));
    CGContextAddEllipseInRect(ctx, CGRectMake(viewW - 50, viewH - 120, 50, 80));
    CGContextDrawPath(ctx, kCGPathFillStroke);
    //眼珠
    [[UIColor blackColor]setFill];
    CGContextAddEllipseInRect(ctx, CGRectMake(viewW + 10, viewH - 70, 20, 20));
    CGContextAddEllipseInRect(ctx, CGRectMake(viewW - 30, viewH - 70, 20, 20));
    CGContextFillPath(ctx);
    //鼻子
    [[UIColor redColor]setFill];
    CGContextAddArc(ctx, viewW, viewH - 38, 12, 0, M_PI * 2, 0);
    CGContextDrawPath(ctx, kCGPathFillStroke);

Quartz2D之绘制一个简单的机器猫这样稍微有点机器猫的样子了；计算位置不用急，算不出来多试几次都能出来；

5、嘴巴、胡须的绘制；

 //鼻子下面的竖线
    CGContextMoveToPoint(ctx, viewW, viewH - 28);
    CGContextAddLineToPoint(ctx, viewW, viewH + 60);
    CGContextStrokePath(ctx);
    //嘴巴，曲线需要通过贝塞尔曲线绘制，和画线段一样，需要设置一个起点，然后再设置终点和一个控制点来设置弯曲程度；控制点离线段越远弯曲越大；
    CGContextMoveToPoint(ctx, viewW + 95, viewH + 18);
    CGContextAddQuadCurveToPoint(ctx, viewW, viewH + 100, viewW - 95, viewH + 18);
    CGContextStrokePath(ctx);
    //胡须，由线段构成，画好一边的另一边就出来了；
    CGContextMoveToPoint(ctx, viewW + 25, viewH - 20);
    CGContextAddLineToPoint(ctx, viewW + 75, viewH - 30);
    CGContextMoveToPoint(ctx, viewW + 25, viewH - 5);
    CGContextAddLineToPoint(ctx, viewW + 85, viewH - 10);
    CGContextMoveToPoint(ctx, viewW + 25, viewH + 10);
    CGContextAddLineToPoint(ctx, viewW + 75, viewH + 15);
    
    CGContextMoveToPoint(ctx, viewW - 25, viewH - 20);
    CGContextAddLineToPoint(ctx, viewW - 75, viewH - 30);
    CGContextMoveToPoint(ctx, viewW - 25, viewH - 5);
    CGContextAddLineToPoint(ctx, viewW - 85, viewH - 10);
    CGContextMoveToPoint(ctx, viewW - 25, viewH + 10);
    CGContextAddLineToPoint(ctx, viewW - 75, viewH + 15);
    
    CGContextStrokePath(ctx);

Quartz2D之绘制一个简单的机器猫这样机器猫大体形状就出来了

6、最后一步剪切掉多余的部分，在一开始就设置上绘制范围，这样只有在这个范围的绘图才会显示

     //画裁剪范围，将这段代码放在绘制绘制大圆的前面
    CGContextAddRect(ctx, CGRectMake(viewW - 152, viewH - 152, 304, 272));
    CGContextClip(ctx);

Quartz2D之绘制一个简单的机器猫

这样就绘制完成了，然后多谢各位大神指正；

Quartz2D之绘制一个简单的机器猫

相关推荐