CoreGraphic之画图

作者: e40c669177be | 来源:发表于2016-06-08 11:32 被阅读304次

    参考文章 http://blog.csdn.net/rhljiayou/article/details/9919713

    /贝塞尔基本用法
     -(void)bezier{
    //初始化
    UIBezierPath *path = [UIBezierPath bezierPath];
    //设置起点
    [path moveToPoint:CGPointMake(10, 10)];
    //设置终点
    [path addLineToPoint:CGPointMake(100, 100)];    
    //设置线宽
    [path setLineWidth:10.0];
    //设置线冒
    [path setLineCapStyle: kCGLineCapRound];
    //设置拐角(两条直线才能有拐角)
    [path setLineCapStyle:kCGLineCapRound];
    //设置线的颜色
    [[UIColor redColor] setStroke];
    //设置填充颜色
    [[UIColor yellowColor] setFill];
    //闭合路径
    [path closePath];
    //填充
    [path fill];
    //绘制
    [path stroke];
    }
    

    pragma mark--使用贝塞尔曲线画各种图形

     -(void)graphics{
     //不透明类型的quartz 2d绘画环境,相当于一个画布,可以在上面任意绘画
    CGContextRef context = UIGraphicsGetCurrentContext();
    //填充颜色
    CGContextSetRGBFillColor(context, 1, 0, 0, 1.0);
    UIFont *font = [UIFont boldSystemFontOfSize:15.0];
    
    
    [@"画扇形和椭圆:" drawInRect:CGRectMake(10, 160, 110, 20) withFont:font];
    
    [@"画三角形:" drawInRect:CGRectMake(10, 220, 80, 20)  withFont:font];
    [@"画圆角矩形:" drawInRect:CGRectMake(10, 260, 100, 20)  withFont:font];
    [@"画贝塞尔曲线:" drawInRect:CGRectMake(10, 300, 100, 20)  withFont:font];
    [@"图片:" drawInRect:CGRectMake(10, 340, 80, 20)  withFont:font];
    [@"画圆:" drawInRect:CGRectMake(10, 20, 80, 20)  withFont:font];
    

    pragma mark---画圆

    //边框圆
    CGContextSetRGBStrokeColor(context, 1, 1, 1, 1);//画笔的颜色
    CGContextSetLineWidth(context, 1.0);//线的宽度
    
    
    //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1弧度=180°/π (≈57.3°) 度=弧度×180°/π 360°=360×π/180 =2π 弧度
    // x,y为圆点坐标,radius半径,startAngle为开始的弧度,endAngle为 结束的弧度,clockwise 0为顺
    CGContextAddArc(context, 100, 20, 15, 0, 2 * M_PI, 0); //添加一个圆
    CGContextDrawPath(context, kCGPathStroke);//绘制路径
    
    //填充圆,无边框
    CGContextAddArc(context, 150, 30, 30, 0, 2* M_PI, 0);
    CGContextDrawPath(context, kCGPathFill);//绘制填充
    
    //画大圆并填充颜色
    UIColor *acolor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
    CGContextSetFillColorWithColor(context, acolor.CGColor);//填充颜色
    CGContextSetLineWidth(context, 3.0);//线的宽度
    CGContextAddArc(context, 250, 40, 40, 0, 2 * M_PI, 0);
    //kCGPathFill填充非零绕数规则,只显示填充的颜色,不显示边框的颜色,kCGPathEOFill表示用奇偶规则(只显示填充颜色),kCGPathStroke路径(只显示画笔也就是边框的颜色),kCGPathFillStroke路径填充(边框颜色和填充颜色都显示),kCGPathEOFillStroke表示描线,不是填充(边框和画笔颜色都显示)
    CGContextDrawPath(context,  kCGPathEOFillStroke);
    
     [@"画线及弧形" drawInRect:CGRectMake(10, 80, 100, 100) withFont:font];
    CGPoint apoint[2];//坐标点
    apoint[0] = CGPointMake(100, 80);//坐标1
    apoint[1] = CGPointMake(130, 80);//坐标2
    

    // CGContextAddLines(CGContextRef _Nullable c, const CGPoint * _Nullable points, size_t count)

    //第二个参数 points[],坐标数组,第三个参数 count大小
    CGContextAddLines(context, apoint, 2);//添加线
    CGContextDrawPath(context, kCGPathStroke);//根据坐标绘制路径
    

    pragma mark ---画笑脸弧形

    //左
    CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);//改变画笔颜色
    CGContextMoveToPoint(context, 140, 80);//开始坐标pi
    //CGContextAddArcToPoint(CGContextRef  _Nullable c, CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2, CGFloat radius)
    //x1 ,y1跟p1形成一条线的坐标p2,x2,y2结束坐标跟p3(x1,y1)形成一条直线,radius:半径 注意算好半径的大小
    CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);
    CGContextStrokePath(context);//绘制路径
    
    //右
    CGContextMoveToPoint(context, 160, 80);//开始坐标p1
    
    CGContextAddArcToPoint(context, 168, 68, 176, 80, 10);
    CGContextStrokePath(context);
    
    //下
    CGContextMoveToPoint(context, 150, 90);
    CGContextAddArcToPoint(context, 158, 102, 166, 90, 10);
    CGContextStrokePath(context);
    

    pragma mark ----画矩形

    CGContextStrokeRect(context, CGRectMake(100, 120, 10, 10));//画方框
    CGContextFillRect(context, CGRectMake(120, 120, 10, 10));//填充框
    //矩形,并填充颜色
    CGContextSetLineWidth(context, 2.0);//线的宽度
    acolor = [UIColor blueColor];
    CGContextSetFillColorWithColor(context, acolor.CGColor);//填充颜色
    acolor = [UIColor yellowColor];
    CGContextSetStrokeColorWithColor(context, acolor.CGColor);
    CGContextAddRect(context, CGRectMake(140, 120, 60, 30));
    CGContextDrawPath(context, kCGPathFillStroke);
    

    pragma mark---矩形并渐变改变颜色

    //第一种填充方式,第一种方式必须导入类库quartcore并#import <QuartzCore/QuartzCore.h>,这个就不输入context上画了.而是将层插入到view层上面,那么这里就设计到quartz core图层编程了
    CAGradientLayer *gradient1 = [CAGradientLayer layer];
    gradient1.frame = CGRectMake(240, 120, 60, 30);
    gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,(id)[UIColor grayColor].CGColor,(id)[UIColor blueColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor orangeColor].CGColor,(id)[UIColor brownColor].CGColor, nil];
    
    [self.layer insertSublayer:gradient1 atIndex:0];
    
    
    //第二章填充方式
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
    CGFloat clolors[] = {
        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, clolors, NULL, sizeof(clolors)/(sizeof(clolors[0] * 4)));//形成梯形,渐变的效果
    CGColorSpaceRelease(rgb);
    
    //画线形成一个矩形
    //CGContextSaveGState与CGContextRestoreCState的作用
    //CGContextSaveGState函数的作用是将当前图形的状态推入堆栈.之后,您对图形的所做的修改会影响之后的描画操作,但不影响存储在堆栈中的拷贝.在修改完成后,您可以通过CGContextRestoreSCtate函数把堆栈顶部的状态弹出,返回之前的图形状态.这种推入和弹出是回到之前图形状态的快速方法,避免逐个撤销所有的状态修改;这也是将某些状态(比如裁剪路径)恢复到原有设置的唯一方式
    CGContextSaveGState(context);
    CGContextMoveToPoint(context, 220, 90);
    CGContextAddLineToPoint(context, 240, 90);
    CGContextAddLineToPoint(context, 240, 110);
    CGContextAddLineToPoint(context, 220, 110);
    
    CGContextClip(context);//context裁剪路径后续操作的路径 //,然后调用CGContextClip方法,而不是像之前那样填充它。以后的绘制动作都会被限定在那个区域中!
    // CGContextDrawLinearGradient(CGContextRef  _Nullable c, CGGradientRef  _Nullable gradient, CGPoint startPoint, CGPoint endPoint, CGGradientDrawingOptions options)
    //gradient渐变颜色 ,startPoint:开始渐变的起始位置,endpoint结束坐标 ,options开始坐标之前or开始之后开始渐变
    CGContextDrawLinearGradient(context, gradient, CGPointMake(220, 90), CGPointMake(240, 110), kCGGradientDrawsAfterEndLocation);
    CGContextRestoreGState(context);//恢复到之前的context
    
    //再写一个看看效果
    CGContextSaveGState(context);
    CGContextMoveToPoint(context, 260, 90);//设置起点
    CGContextAddLineToPoint(context, 280, 90);
    CGContextAddLineToPoint(context, 280, 100);
    CGContextAddLineToPoint(context, 260, 100);
    CGContextClip(context);
    //开始和结束坐标是控制渐变的方向和形状
    CGContextDrawLinearGradient(context, gradient, CGPointMake(260, 90), CGPointMake(260, 100), kCGGradientDrawsAfterEndLocation);
    CGContextRestoreGState(context);
    
    //渐变的圆
     //CGContextDrawRadialGradient(CGContextRef  _Nullable c, CGGradientRef  _Nullable gradient, CGPoint startCenter, CGFloat startRadius, CGPoint endCenter, CGFloat endRadius, CGGradientDrawingOptions options)
    //startCenter中心圆点(白色的起点)
    //startRadius:起点的半径,这个值多大,中心就是多大一块纯色的白圈
    //endCenter;白色的终点(可以和起点一样,不一样的话就像探照灯一样从起点投影到这个终点)
    //endRadius:终点的半径
    //CGGradientDrawingOptions options //应该是 kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation
    CGContextDrawRadialGradient(context, gradient, CGPointMake(300, 100), 5.0, CGPointMake(300, 100), 30, kCGGradientDrawsBeforeStartLocation);
    

    pragma mark---画椭圆

    //中心点坐标 160,180 宽度20 高度8
    CGContextAddEllipseInRect(context, CGRectMake(160, 180, 20, 8));//椭圆
    CGContextDrawPath(context, kCGPathFillStroke);
    

    pragma mark---画三角形

    //只要三个点就行跟画一条线的方式一样,把三个点连接起来
    CGPoint sPoints[3];//坐标点
    sPoints[0] = CGPointMake(100, 220);
    sPoints[1] = CGPointMake(130, 220);
    sPoints[2] = CGPointMake(130, 160);
    CGContextAddLines(context, sPoints, 3);
    CGContextClosePath(context);//封起来
    CGContextDrawPath(context, kCGPathFillStroke);//根据坐标绘制路径
    

    pragma mark ---画扇形

    acolor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1];
    CGContextSetFillColorWithColor(context, acolor.CGColor);//填充颜色
    //以10为半径围绕圆心画指定角度的扇形
    CGContextMoveToPoint(context, 160, 180);
    // CGContextAddArc(CGContextRef  _Nullable c, CGFloat x, CGFloat y,     CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
    //1)startAngle为0,绿色箭头的地方。
    //2)endAngle为45,黄色箭头的地方。
    //3)clockwise为0,按照红色箭头往下绘制图形。
    //4)所以效果就是红色的扇形。
    // 补充:如果clockwise为1,则是蓝色部分区域
    CGContextAddArc(context, 160, 180, 30, 0, 45 *(M_PI/ 180), 1);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
    

    pragma mark---画圆角矩形

    float fw = 180;
    float fh = 280;
    CGContextMoveToPoint(context, fw, fh - 20);//开始坐标右边开始
    CGContextAddArcToPoint(context, fw, fh, fw - 20, fh, 10);//右下角角度
    CGContextAddArcToPoint(context, 120, fh, 120, fh - 20, 10);//左下角角度
    CGContextAddArcToPoint(context, 120, 250, fw - 20, 250, 10);//左上角
    CGContextAddArcToPoint(context, fw, 250, fw, fh -20, 10);//左上角
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
    

    pragma mark ---画贝塞尔曲线

    //二次曲线
    CGContextMoveToPoint(context, 120, 300);//起点
    CGContextAddQuadCurveToPoint(context, 190, 310, 120, 390);//设置贝塞尔曲线的控制点(最高点或最低点)坐标和终点坐标c
    CGContextStrokePath(context);
    //三个点确定一条曲线
    
    //三次曲线函数
    CGContextMoveToPoint(context, 200, 300);
    CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//设置贝塞尔曲线的控制的坐标和控制的终点坐标
    CGContextStrokePath(context);
    

    pragma mark ---图片

    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    [image drawInRect:CGRectMake(60, 340, 20, 20)];//在坐标中画出图片(原图)第一张图
    [image drawAtPoint:CGPointMake(100, 340)];///保持图片大小在point点开始画图片,第二张图
    
    CGContextDrawImage(context, CGRectMake(100, 340, 20, 20), image.CGImage);//将原图进行上下颠倒,大小为(20,20),第三张图
    

    pragma mark--解决图片上下颠倒的问题

    UIGraphicsPushContext(context);
    [image drawInRect:CGRectMake(0, 0, 20, 20)];
    UIGraphicsPopContext();//第四张图

    相关文章

      网友评论

        本文标题:CoreGraphic之画图

        本文链接:https://www.haomeiwen.com/subject/ksrjdttx.html