10.13核心绘图（一）

（一）概念

（1）Quartz2D是一个纯C语言跨平台的二维绘图引擎。也有封装的OC版本，同时支持iOS和Ma OS X系统。它可以裁剪图片，做一个画板，支付宝手势解锁，柱状图，饼状图，折线图等，转盘猜奖，也可以绘制文字，裁剪图片，生成PDF自定义充电条等各种自定义控件。 包含在Core Graphics框架中。

（2）数据类型都是已CG来开头的。

（3）Quartz2D绘制步骤：

3.1获取图形上下文。

3.2向图形上下文对象添加路径。

3.3渲染（把图形上下文中的图形绘制到对应设备上）。

（4）图形上下文：CGContextRef类型，英文称Graphics Context。提供了五种类型：

4.1Window Graphics Context

4.1Bitmap Graphics Context

4.3Layer Graphics Context(UI控件)

4.4Printer Graphics Context

4.5PDF Graphics Context 

（5）drawRect方法：

// 绘制东西请把代码写在drawRect方法中

// 因为只有这个方法里面才能获取到当前view的上下文

 

// drawRect方法中的参数rect是什么?

// 是当前控件的bounds

 

// drawRect方法什么时候调用

// 系统自动调用

// 1.当这个view第一次显示的时候调用一次

// 2.当view重新绘制的时候调用

 

// 如何重新绘制

// 1.调用view的setNeedDisplay

// 2.调用view的setNeedDisplayInRect rect参数是刷新指定的区域

 

// drawRect不要手动调用

// 因为系统调的时候是会确保创建view的上下文

// 手动调用的时候可能获取不到

 

（二）基本绘制方法

（1）绘制点或者线

 

- (void)drawRect:(CGRect)rect {
    
    // 拿到当前的图形上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
   
    // 拼接路径并且放到图形上下文
    CGContextMoveToPoint(ref, 100, 100);
   
    CGContextAddLineToPoint(ref, 150, 150);
   
    CGContextStrokePath(ref);
    
}

 

 

（2）OC绘制点线

    // OC方法，贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
   
    [path moveToPoint:CGPointMake(10, 10)];
   
    [path addLineToPoint:CGPointMake(100, 100)];
   
    [path stroke];

 

（3）圆/弧/椭圆

// 画弧

- (void)test4
{
    // 画弧
    //        UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:M_PI_4 clockwise:YES];
    //
    //        [path stroke];

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextAddArc(ctx, 150, 150, 100, 0, M_PI_4, 1);

    CGContextStrokePath(ctx);
}

 

// 椭圆

- (void)test3
{
    // 椭圆
    //    [[UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)] stroke];

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 200));

    CGContextStrokePath(ctx);
}

 

// 圆角矩形

- (void)test2
{
    // 圆角矩形
    [[UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:50] stroke];
}

 

// 矩形

- (void)test1
{
    // 矩形
    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
    [path stroke];
}

 

（4）设置样式

设置属性

*设置颜色-调用UIColor对象(某个颜色)中的set方法

// - (void)set;

// - (void)setFill;

// - (void)setStroke;

 

*设置宽度

oc-调用UIBezierPath对象中的setLineWidth方法

c-CGContextSetLineWidth

 

*设置头尾样式

oc-调用UIBezierPath对象中的setLineCapStyle方法

c-CGContextSetLineCap

 

*设置连接处的样式

oc-调用UIBezierPath对象中的setLineJoinStyle方法

c-CGContextSetLineJoin

 

（5）两种规则

5.1奇偶填充规则

//  被覆盖过奇数次填充 偶数次不填充。

 

5.2非零绕数规则

//  印一条射线 从左到右跨过 +1 从右到左跨过 -1 最后如果为0 那么不填充  否则填充。

两种规则冲突。

（6）饼状图

// 饼状图
- (void)drawRect:(CGRect)rect {
   
    // 模拟服务器传过来要绘制的一组数据
    NSArray *array = @[@0.1,@0.3,@0.2,@0.4];
    CGFloat start = 0;
    CGFloat end = 0;
   
    for (int i = 0; i< array.count; i++) {
       
        end =  2 * M_PI * [array[i] floatValue] + end;
       
        // 画弧
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:80 startAngle:start
                                     endAngle:end clockwise:true];
        // 弧链接圆心变成披萨
        [path addLineToPoint:CGPointMake(150, 150)];
       
        // 随机颜色
        [[self randomColor] setFill];
       
        // 填充
        [path fill];
        start = end;
    }
 
}

// 随机颜色
- (UIColor *)randomColor {
    CGFloat randR = arc4random() % 255/256.0;
    CGFloat randG = arc4random() % 255/256.0;
    CGFloat randB = arc4random() % 255/256.0;
   
    return [UIColor colorWithRed:randR green:randG blue:randB alpha:1.0];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
   
    [self setNeedsDisplay];
}