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

时间：2023-02-07 20:59:27

学习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, );

    //线条颜色为黑色

    [[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, , , M_PI * , );

    //设置圆的填充色，我根据取色器的数据设置的

    [[UIColor colorWithRed: / 255.0 green: / 255.0 blue: / 255.0 alpha:] setFill];

    //使用这个方法渲染，可以渲染出描边。

    CGContextDrawPath(ctx, kCGPathFillStroke);

    //小圆，圆心稍微向下，半径变小

    CGContextAddArc(ctx, viewW, viewH + , , , M_PI * , );

    [[UIColor whiteColor]setFill];

    CGContextDrawPath(ctx, kCGPathFillStroke);

3、画领带：

    //红色矩形，也可以直接画一条很粗的线段

    CGContextAddRect(ctx, CGRectMake(viewW - , viewH + , , ));

    [[UIColor redColor]setFill];

    CGContextDrawPath(ctx, kCGPathFillStroke);

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

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

 //眼睛是椭圆的，采用的是画圆的方式，此时圆的位置由左上角决定；CGRectMake:前两个参数为左上角位置；后两个参数代表圆宽和长，设置不同参数形成椭圆；

    [[UIColor whiteColor]setFill];

    CGContextAddEllipseInRect(ctx, CGRectMake(viewW, viewH - , , ));

    CGContextAddEllipseInRect(ctx, CGRectMake(viewW - , viewH - , , ));

    CGContextDrawPath(ctx, kCGPathFillStroke);

    //眼珠

    [[UIColor blackColor]setFill];

    CGContextAddEllipseInRect(ctx, CGRectMake(viewW + , viewH - , , ));

    CGContextAddEllipseInRect(ctx, CGRectMake(viewW - , viewH - , , ));

    CGContextFillPath(ctx);

    //鼻子

    [[UIColor redColor]setFill];

    CGContextAddArc(ctx, viewW, viewH - , , , M_PI * , );

    CGContextDrawPath(ctx, kCGPathFillStroke);

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

5、嘴巴、胡须的绘制；

 //鼻子下面的竖线

    CGContextMoveToPoint(ctx, viewW, viewH - );

    CGContextAddLineToPoint(ctx, viewW, viewH + );

    CGContextStrokePath(ctx);

    //嘴巴，曲线需要通过贝塞尔曲线绘制，和画线段一样，需要设置一个起点，然后再设置终点和一个控制点来设置弯曲程度；控制点离线段越远弯曲越大；

    CGContextMoveToPoint(ctx, viewW + , viewH + );

    CGContextAddQuadCurveToPoint(ctx, viewW, viewH + , viewW - , viewH + );

    CGContextStrokePath(ctx);

    //胡须，由线段构成，画好一边的另一边就出来了；

    CGContextMoveToPoint(ctx, viewW + , viewH - );

    CGContextAddLineToPoint(ctx, viewW + , viewH - );

    CGContextMoveToPoint(ctx, viewW + , viewH - );

    CGContextAddLineToPoint(ctx, viewW + , viewH - );

    CGContextMoveToPoint(ctx, viewW + , viewH + );

    CGContextAddLineToPoint(ctx, viewW + , viewH + );

    CGContextMoveToPoint(ctx, viewW - , viewH - );

    CGContextAddLineToPoint(ctx, viewW - , viewH - );

    CGContextMoveToPoint(ctx, viewW - , viewH - );

    CGContextAddLineToPoint(ctx, viewW - , viewH - );

    CGContextMoveToPoint(ctx, viewW - , viewH + );

    CGContextAddLineToPoint(ctx, viewW - , viewH + );

    CGContextStrokePath(ctx);

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

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

     //画裁剪范围，将这段代码放在绘制绘制大圆的前面

    CGContextAddRect(ctx, CGRectMake(viewW - , viewH - , , ));

    CGContextClip(ctx);

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

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

相关文章