绘图学习

Posted 2022-11-27 phyLearn

最近对绘图进行了简单的学习，发现绘图的功能真是异常强大，基本可以自定义任何图形。下面对我学习的代码进行总结。
刚开始以为可以将代码直接写到控制器中，后来发现图形并不显示，后来发现必须重写视图的drawRect方法。
以下是自己模仿写的一些代码：

//一个不透明类型的quartz,相当于一个画布，可以在上面任意绘图
    CGContextRef content = UIGraphicsGetCurrentContext();
    //写文字
    CGContextSetRGBFillColor(content, 0, 0, 0, 1.0);//设置填充颜色
    UIFont *font = [UIFont boldSystemFontOfSize:15.0];//设置

    [@"画圆：" drawInRect:CGRectMake(10, 20, 80, 20) withFont:font];

    /**
     *  画圆
     */
    //1.无填充，有边框的圆
    CGContextSetRGBStrokeColor(content, 0, 0, 0, 1.0);//画笔线的颜色
    CGContextSetLineWidth(content, 1.0);//线的宽度
    //x,y圆点坐标，radius半径，startAngle为开始的弧度，endAngle为结束的弧度，clocksise 0为顺时针，1为逆时针
    CGContextAddArc(content, 100, 20, 15, 0, 2 * PI, 0 );//添加一个圆
    CGContextDrawPath(content, kCGPathStroke);//绘制填充


    //2.无边框，有填充的圆
    CGContextAddArc(content, 150, 30, 30, 0, 2 * PI, 0);//添加一个圆
    CGContextDrawPath(content, kCGPathFill);//绘制填充

    //3.有边框，有填充的圆
    UIColor *aColor = [UIColor colorWithRed:1 green:0.0 blue:1 alpha:1.0];
    CGContextSetFillColorWithColor(content, aColor.CGColor);//填充颜色
    CGContextSetLineWidth(content, 3.0);//线的宽度
    CGContextAddArc(content, 250, 40, 40, 0, 2 * PI, 0);//添加一个圆
    //kCGPathFill填充非零绕数规则,kCGPathEOFill表示用奇偶规则,kCGPathStroke路径,kCGPathFillStroke路径填充,kCGPathEOFillStroke表示描线，不是填充
    CGContextDrawPath(content, kCGPathFillStroke);

    /**
     *  画线及圆弧
     */
    //1.画线
    CGPoint aPoints[2];//坐标数组
    aPoints[0] = CGPointMake(100, 80);//坐标1
    aPoints[1] = CGPointMake(130, 80);//坐标2
    //CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)
    //points[]坐标数组，和count大小
    CGContextAddLines(content, aPoints, 2);//添加线
    CGContextDrawPath(content, kCGPathFillStroke);//根据坐标绘制路径
    //2.画笑脸圆弧
    //左
    CGContextSetRGBStrokeColor(content, 0, 0, 1, 1.0);//改变画笔颜色
    CGContextMoveToPoint(content, 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(content, 148, 68, 156, 80, 10);
    CGContextStrokePath(content);
    //右
    CGContextMoveToPoint(content, 160, 80);
    CGContextAddArcToPoint(content, 168, 68, 176, 80, 10);
    CGContextStrokePath(content);

    CGContextMoveToPoint(content, 150, 90);
    CGContextAddArcToPoint(content, 169, 68, 176, 80, 10);
    CGContextStrokePath(content);

    /**
     *  画矩形
     */
    CGContextStrokeRect(content, CGRectMake(100, 120, 10, 10));//画方框
    CGContextFillRect(content, CGRectMake(120, 120, 10, 10));//填充框

    //矩形，并填充颜色
    CGContextSetLineWidth(content, 2.0);//线的宽度
    aColor = [UIColor blueColor]; //blue蓝色
    CGContextSetFillColorWithColor(content, aColor.CGColor);//填充颜色
    aColor = [UIColor yellowColor];
    CGContextSetStrokeColorWithColor(content, aColor.CGColor);//线框颜色
    CGContextAddRect(content, CGRectMake(140, 120, 60, 30)); //画方框
    CGContextDrawPath(content, kCGPathFillStroke); //绘画路径

    /**
     *  //矩形，并填弃渐变颜色
     //关于颜色参考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html
     //http://blog.csdn.net/reylen/article/details/8622932
     //第一种填充方式，第一种方式必须导入类库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 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];

    //第二种填充方式
    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,0,1.00,
    ;
    CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/sizeof(colors[0]  * 4));
    CGColorSpaceRelease(rgb);

    //画线形成一个矩形
    //CGContextSaveGState与CGContextRestoreGState的作用
    /*
     CGContextSaveGState函数的作用是将当前图形状态推入堆栈。之后，您对图形状态所做的修改会影响随后的描画操作，但不影响存储在堆栈中的拷贝。在修改完成后，您可以通过CGContextRestoreGState函数把堆栈顶部的状态弹出，返回到之前的图形状态。这种推入和弹出的方式是回到之前图形状态的快速方法，避免逐个撤消所有的状态修改；这也是将某些状态（比如裁剪路径）恢复到原有设置的唯一方式。
     */
    CGContextSaveGState(content);
    CGContextMoveToPoint(content, 220, 90);
    CGContextAddLineToPoint(content, 240, 90);
    CGContextAddLineToPoint(content, 240, 110);
    CGContextAddLineToPoint(content, 220, 110);
    CGContextClip(content);//context裁剪路径，后续操作的路径
    //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)
    //gradient渐变颜色,startPoint开始渐变的起始位置,endPoint结束坐标,options开始坐标之前or开始之后开始渐变
    CGContextDrawLinearGradient(content, gradient, CGPointMake(220, 90), CGPointMake(240, 110), kCGGradientDrawsAfterEndLocation);
    CGContextRestoreGState(content);//恢复到之前的context

    CGContextSaveGState(content);
    CGContextMoveToPoint(content, 260, 90);
    CGContextAddLineToPoint(content, 280, 90);
    CGContextAddLineToPoint(content, 280, 100);
    CGContextClip(content);

    CGContextDrawLinearGradient(content, gradient, CGPointMake(260, 90), CGPointMake(260, 100),kCGGradientDrawsAfterEndLocation);
    CGContextRestoreGState(content);

    //颜色渐变的圆
    CGContextDrawRadialGradient(content, gradient, CGPointMake(300, 100), 0.0, CGPointMake(300, 100),30, kCGGradientDrawsAfterEndLocation);

    /**
     *  画圆形和椭圆
     */
    //画扇形，也就是圆
    aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1.0];
    CGContextSetFillColorWithColor(content, aColor.CGColor);
    //以10为半径围绕圆心画指定角度扇形
    CGContextMoveToPoint(content, 160, 180);
    CGContextAddArc(content, 160, 180, 30, - 60 * PI / 180, -120 * PI / 180, 1);
    CGContextClosePath(content);
    CGContextDrawPath(content, kCGPathFillStroke);
    CGContextAddEllipseInRect(content, CGRectMake(160, 180, 20, 8));

    //画椭圆
    CGContextAddEllipseInRect(content, CGRectMake(160, 180, 20, 20));
    CGContextDrawPath(content, kCGPathFillStroke);

    /**
     *  画三角形
     */
    CGPoint sPoints[3];
    sPoints[0] = CGPointMake(100, 220);
    sPoints[1] = CGPointMake(130, 220);
    sPoints[2] = CGPointMake(130, 160);
    CGContextAddLines(content, sPoints, 3);//添加线
    CGContextClosePath(content);
    CGContextClosePath(content);
    CGContextDrawPath(content, kCGPathFillStroke);

    float fw = 180;
    float fh = 280;

    CGContextMoveToPoint(content, fw, fh - 20);
    CGContextAddArcToPoint(content, fw, fh, fw - 20 , fh, 10);
    CGContextAddArcToPoint(content, 120, fh, 120, fh - 20, 10);
    CGContextAddArcToPoint(content, 120, 250, fw - 20, 250, 10);
    CGContextAddArcToPoint(content, fw, 250, fw, fh - 20, 10);
    CGContextClosePath(content);
    CGContextDrawPath(content, kCGPathFillStroke);

    /**
     *  画贝塞尔曲线
     */
    //二次曲线
    CGContextMoveToPoint(content, 120, 300);//设置path的起点
    CGContextAddQuadCurveToPoint(content, 190, 310, 120, 390);//设置贝塞尔曲线的控制点坐标和终点坐标
    CGContextStrokePath(content);
    //三次曲线函数
    CGContextMoveToPoint(content, 200, 300);
    CGContextAddCurveToPoint(content, 250, 280, 250, 400, 280, 300);
    CGContextStrokePath(content);