CoreGraphics 练习

主要熟悉一些基本的API

获取上下文的集中方法

//创建图片类型的上下文
UIGraphicsBeginImageContextWithOptions
//UIView,在drawRect中，Cocoa会为你创建一个图形上下文
- (void)drawRect:(CGRect)rect
//CALayer
- (void)drawInContext:(CGContextRef)ctx
//delegate回调
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx

先从drawRect开始

先说一些API的区别与相同。

UIBezierPath 可以 直接 stroke 或者fill ，不需要添加到上下文中，也不需要进行绘制。
 [pathRect stroke];  //可是设置 添加路径然后进行喷绘 UIBezierPath 本身有stroke 方法
    //添加路径
//    CGContextAddPath(contextRef, pathRect.CGPath);
//    CGContextStrokePath(contextRef);

关于设置颜色：描边与填充同样的道理，当然要选取最简单的代码来实现。

 [[UIColor blueColor]set]  等于setFill + setStroke
  [[UIColor redColor]setFill]; //等同于   CGContextSetFillColorWithColor(contextRef, [UIColor redColor].CGColor);

//kCGPathFill填充非零绕数规则,
kCGPathEOFill表示用奇偶规则,
kCGPathStroke路径,
kCGPathFillStroke路径填充,
kCGPathEOFillStroke表示描线，不是填充
CGContextDrawPath(context, kCGPathFillStroke);//绘制路径 加填充

 //画笑脸弧线
    //左
    CGContextMoveToPoint(context, 140, 80);//开始坐标p1
    //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)
    //x1,y1跟p1形成一条线的坐标p2，x2,y2结束坐标跟p3形成一条线的p3,radius半径,注意, 需要算好半径的长度,
    CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);//⚠️
    CGContextStrokePath(context);

下面是一些简单的绘制

绘制.png

- (void)drawRect:(CGRect)rect {
    
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    NSLog(@"%s",__func__);
    
    
    UIBezierPath *path =[UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(100, 100)];
    
//    [[UIColor whiteColor]setStroke];
    UIColor *color =[UIColor whiteColor];
    CGContextSetStrokeColorWithColor(contextRef, color.CGColor);
    CGContextAddPath(contextRef, path.CGPath);
    CGContextStrokePath(contextRef);
//    CGContextDrawPath(contextRef, kCGPathStroke);
    
    
    //通过点 做矩形
    
    UIBezierPath *pathRect =[UIBezierPath bezierPath];
    [pathRect moveToPoint:CGPointMake(10, 110)];
    [pathRect addLineToPoint:CGPointMake(110, 110)];
    [pathRect addLineToPoint:CGPointMake(110, 210)];
    [pathRect addLineToPoint:CGPointMake(10, 210)];
    //闭合路径
    [pathRect closePath];
    
    //设置颜色
    [[UIColor redColor]setStroke];
    
    [pathRect stroke];  //可是设置 添加路径然后进行喷绘 UIBezierPath 本身有stroke 方法
    //添加路径
//    CGContextAddPath(contextRef, pathRect.CGPath);
    
//    CGContextStrokePath(contextRef);
    
    
    
    UIBezierPath *pathRect2 =[UIBezierPath bezierPathWithRect:CGRectMake(110, 10, 100, 100)];
    CGContextSetFillColorWithColor(contextRef, [UIColor blueColor].CGColor);
    [pathRect2 fill];
    
    
    //设置颜色
    [[UIColor brownColor]setStroke];
    UIBezierPath *pathRect3 =[UIBezierPath bezierPathWithRect:CGRectMake(215, 10, 100, 100)];

    [[UIColor redColor]setFill]; //等同于  [[UIColor redColor]set] CGContextSetFillColorWithColor(contextRef, [UIColor redColor].CGColor);

    //添加路径   这两步等同于 [pathRect3 fill];
    CGContextAddPath(contextRef, pathRect3.CGPath);

    CGContextFillPath(contextRef);

    
    //画圆
    //ArcCenter:中心点
    //radius:半径
    //startAngle：起始角度
    //endAngle：结束角度
    //clockwise：是否逆时针
    UIBezierPath *pathCircle =[UIBezierPath bezierPathWithArcCenter:CGPointMake(170, 170) radius:50 startAngle:0 endAngle:M_PI *2 clockwise:NO];
   
//    [pathCircle fill];//填充
    pathCircle.lineWidth = 5;
    [pathCircle stroke];
    
    
    
    //椭圆
    UIBezierPath *pathOvar =[UIBezierPath bezierPathWithOvalInRect:CGRectMake(230, 120, 150, 100)];
    
    pathOvar.lineWidth = 5;
    [pathOvar fill];
    

    
    [[UIColor whiteColor]set];
    //矩形
    UIBezierPath *pathText =[UIBezierPath bezierPathWithRect:CGRectMake(10, 220, 100, 100)];
    
    pathText.lineWidth = 5;
    [pathText fill];
    //矩形中画字
    NSString *str = @"他大舅他二舅都是他舅";
    NSMutableDictionary *dic =[NSMutableDictionary dictionary];
    dic[NSForegroundColorAttributeName]= [UIColor purpleColor];
    dic[NSFontAttributeName] = [UIFont systemFontOfSize:15];
    dic[NSUnderlineStyleAttributeName] = @(NSUnderlineStyleSingle);
    NSShadow *shadow =[[NSShadow alloc]init];
    shadow.shadowOffset = CGSizeMake(2, 2);
    shadow.shadowColor =[UIColor cyanColor];
    dic[NSShadowAttributeName] = shadow;
    
    //字体间距
    dic[NSKernAttributeName] = @5;
    [str drawInRect:CGRectMake(10, 220, 100, 100) withAttributes:dic];
    CGContextStrokePath(contextRef);
    
    
    
    //椭圆 贝塞尔曲线
    UIBezierPath *pathCurver =[UIBezierPath bezierPath];

    [pathCurver moveToPoint:CGPointMake(120, 230)];
    [pathCurver addQuadCurveToPoint:CGPointMake(200, 300) controlPoint:CGPointMake(150, 200)];
    pathCurver.lineWidth = 5;
    [pathCurver stroke];
    

    
    
    //绘制图片
    UIImage *image =[UIImage imageNamed:@"1"];
    
    //设置绘制模式
    [image drawInRect:CGRectMake(10, 330, 100, 100) blendMode:kCGBlendModeSoftLight alpha:1];
    CGContextStrokePath(contextRef);
}

不用贝塞尔曲线的

- (void)drawRect:(CGRect)rect {
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    

    
    //只描边
    [[UIColor blueColor]setStroke];
    [[UIColor redColor]setFill];
   
    CGContextSetLineWidth(context, 5.0);
    CGContextStrokeRect(context, CGRectMake(100, 120, 100, 100));

    CGContextFillRect(context, CGRectMake(100, 300, 100, 100));



    CGContextDrawPath(context, kCGPathFillStroke);
}

最后详细说明下 CGContextSaveGState CGContextRestoreGState //保存当前上下文状态，如果做了裁剪就会在裁剪范围内进行绘制，只有恢复到之前的上下文状态，才可以在裁剪区域之外进行绘制

上下文状态.png

- (void)drawRect:(CGRect)rect {
    
    CGContextRef context = UIGraphicsGetCurrentContext();

    
    //只描边
    [[UIColor blueColor]setStroke];
    [[UIColor redColor]setFill];

    
    //渐变色 采用layer
    CAGradientLayer *gradient1 = [CAGradientLayer layer];
    gradient1.frame = CGRectMake(100, 200, 60, 30);
    gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,
                        (id)[UIColor grayColor].CGColor,
                        (id)[UIColor blackColor].CGColor,
                        (id)[UIColor yellowColor].CGColor,
                        (id)[UIColor blueColor].CGColor,
                        (id)[UIColor redColor].CGColor,
                        (id)[UIColor greenColor].CGColor,
                        (id)[UIColor orangeColor].CGColor,
                        (id)[UIColor brownColor].CGColor,nil];
    [self.layer insertSublayer:gradient1 atIndex:0];
    

    
    //保存当前上下文状态，如果做了裁剪就会在裁剪范围内 进行绘制，只有恢复到之前的上下文状态，才可以在裁剪区域之外进行绘制
    CGContextSaveGState(context);
    
    CGContextMoveToPoint(context, 250, 300);
    CGContextAddLineToPoint(context,350, 300);
    CGContextAddLineToPoint(context, 350, 400);
    CGContextAddLineToPoint(context, 250, 400);
    CGContextClip(context);//context裁剪路径,后续操作的路径

    //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)
    //gradient渐变颜色,startPoint开始渐变的起始位置,endPoint结束坐标,options开始坐标之前or开始之后开始渐变
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
    CGFloat colors[] =
    {
        1,1,1, 1.00,
        1,1,0, 1.00,
        1,0,0, 1.00,
        1,0,1, 1.00,
        0,1,1, 1.00,
        0,1,0, 1.00,
        0,0,1, 1.00,
        0,0,0, 1.00,
    };
    CGGradientRef gradient = CGGradientCreateWithColorComponents
    (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));//形成梯形，渐变的效果
    CGColorSpaceRelease(rgb);
    
    CGContextDrawLinearGradient(context, gradient, CGPointMake(250, 300), CGPointMake(350, 400), kCGGradientDrawsAfterEndLocation);

    //恢复上下文状态
    CGContextRestoreGState(context);
    
  //如果没有恢复上下文状态，下方的矩形是看不见的
    CGContextFillRect(context, CGRectMake(100, 450, 100, 100));
    CGContextDrawPath(context, kCGPathFill);
    
    
}

CoreGraphics 练习

获取上下文的集中方法

先从drawRect开始

不用贝塞尔曲线的

推荐阅读更多精彩内容