UI基础之画图

part1:demo效果如下图

@implementation DrawView

- (id)initWithFrame:(CGRect)frame {

    if (self= [super initWithFrame:frame]) {

    }
    return self;
}


//覆盖drawRect方法，可以在此自定义绘画和动画
- (void)drawRect:(CGRect)rect {
    //创建画板，一个不透明的Quartz 2D绘画环境
    CGContextRef context = UIGraphicsGetCurrentContext();
    //填充颜色
    CGContextSetRGBFillColor(context, 1, 0, 0, 1.0);
    //画笔颜色
    CGContextSetRGBStrokeColor(context, 1, 1, 1, 1.0);
    //画笔宽度
    CGContextSetLineWidth(context, 1.0);

    //画边框圆
    /*CGContextAddArc(CGContextRef __nullable c, CGFloat x, CGFloat y,
     CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)*/

    CGContextAddArc(context, 80, 60, 15, 0, 2 * M_PI, 0);
    /**
     *  
     kCGPathFill,填充，无边框
     kCGPathEOFill,
     kCGPathStroke,绘制路径
     kCGPathFillStroke,绘制路径加填充
     kCGPathEOFillStroke,
     */
    CGContextDrawPath(context, kCGPathStroke);//绘制路径

    //填充，无边框
    CGContextAddArc(context, 180, 60, 40, 0, 2 * M_PI, 0);
    CGContextDrawPath(context, kCGPathFill);

    //边框加填充
    CGContextAddArc(context, 280, 60, 40, 0, 2 * M_PI, 0);
    CGContextSetLineWidth(context, 3.0);
    //设置颜色
    UIColor *aColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:1.0];
    CGContextSetFillColorWithColor(context, aColor.CGColor);
    CGContextDrawPath(context, kCGPathFillStroke);

    //画线
    CGPoint aPoints[2];
    aPoints[0] = CGPointMake(60, 120);
    aPoints[1] = CGPointMake(100, 120);
    /*
     CGContextAddLines(CGContextRef __nullable c,
     const CGPoint * __nullable points, size_t count)
     */
    CGContextAddLines(context, aPoints, 2);//添加线
    CGContextDrawPath(context, kCGPathStroke);//绘制路径

    //画笑脸
    CGContextSetRGBStrokeColor(context, 0, 1, 1, 1.0);//画笔颜色
    //左边
    CGContextMoveToPoint(context, 140, 120);
    /*
     CGContextAddArcToPoint(CGContextRef __nullable c,
     CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2, CGFloat radius)
     */
    CGContextAddArcToPoint(context, 148, 108, 156, 120, 10);
    CGContextStrokePath(context);
    //右边
    CGContextMoveToPoint(context, 160, 120);
    CGContextAddArcToPoint(context, 168, 108, 176, 120, 10);
    CGContextStrokePath(context);
    //下边
    CGContextMoveToPoint(context, 150, 130);
    CGContextAddArcToPoint(context, 158, 142, 166, 130, 10);
    CGContextStrokePath(context);

    //画矩形
    //画方框
    CGContextStrokeRect(context, CGRectMake(50, 160, 20, 20));
    //填充框
    CGContextFillRect(context, CGRectMake(80, 160, 20, 20));

    //矩形填充颜色
    CAGradientLayer *gradient1 = [CAGradientLayer layer];
    gradient1.frame = CGRectMake(120, 160, 60, 30);
    gradient1.colors = [NSArray arrayWithObjects:
                        (id)[UIColor whiteColor].CGColor,
                        (id)[UIColor redColor].CGColor,
                        (id)[UIColor orangeColor].CGColor,
                        (id)[UIColor blueColor].CGColor,
                        (id)[UIColor yellowColor].CGColor,
                        (id)[UIColor greenColor].CGColor,
                        (id)[UIColor purpleColor].CGColor,
                        (id)[UIColor cyanColor].CGColor,
                        (id)[UIColor brownColor].CGColor,
                        (id)[UIColor lightGrayColor].CGColor,
                        nil];
    [self.layer insertSublayer:gradient1 above:0];

    //第二种填充方式
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
    CGFloat colors[] = {
        1,1,1,1.0,
        1,1,0,1.0,
        1,0,0,1.0,

        0,1,1,1.0,
        0,1,0,1.0,
        0,0,1,1.0,

        0,0,0,1.0
    };

    CGGradientRef gd = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/sizeof(colors[0]*4));
    //画线组成矩形
    CGContextSaveGState(context);

    CGContextMoveToPoint(context, 200, 160);
    CGContextAddLineToPoint(context, 240, 160);
    CGContextAddLineToPoint(context, 240, 200);
    CGContextAddLineToPoint(context, 200, 200);

    CGContextClip(context);//剪裁路径，后续操作的路径
    //渐变方向
    CGContextDrawLinearGradient(context, gd, CGPointMake(200, 160), CGPointMake(240, 200), kCGGradientDrawsAfterEndLocation);

    CGContextRestoreGState(context);


    //颜色渐变圆
    CGContextDrawRadialGradient(context, gd, CGPointMake(80, 220), 0.0, CGPointMake(80, 220), 30, kCGGradientDrawsBeforeStartLocation);
//    UIColor *Color = [UIColor colorWithRed:0 green:1 blue:1 alpha:1.0];

    //扇形
    aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1.0];
    CGContextSetFillColorWithColor(context, aColor.CGColor);

    //以半径为10
    CGContextMoveToPoint(context, 140, 250);
    CGContextAddArc(context, 140, 250, 30, 60 * M_PI/180, 120 * M_PI/180, 1);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);

    //画椭圆
    CGContextAddEllipseInRect(context, CGRectMake(180, 210, 40, 20));
    CGContextDrawPath(context, kCGPathFillStroke);
}

part2:demo效果如下图

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    //写字体
    UIFont *font = [UIFont boldSystemFontOfSize:15.0];
    UIColor *aColor = [UIColor purpleColor];
    [@"画三角形" drawInRect:CGRectMake(10, 220, 80, 20) withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:aColor}];
    [@"画圆角矩形" drawInRect:CGRectMake(10, 260, 100, 20) withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:aColor}];
    [@"画贝塞尔曲线" drawInRect:CGRectMake(10, 300, 100, 20) withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:aColor}];
    [@"图片" drawInRect:CGRectMake(10, 340, 80, 20) withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:aColor}];

    CGContextSetRGBFillColor(context, 1, 0, 0, 1);//设置填充颜色
    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);//设置画笔颜色

//画三角形
    CGPoint aPoints[3];
    aPoints[0] = CGPointMake(100, 220);
    aPoints[1] = CGPointMake(130, 220);
    aPoints[2] = CGPointMake(130, 160);
    //添加点之间的线
    CGContextAddLines(context, aPoints, 3);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
/* enum CGPathDrawingMode:
     kCGPathFill:           只有填充（非零缠绕数填充），不绘制边框
     kCGPathEOFill:         奇偶规则填充（多条路径交叉时，奇数交叉填充，偶交叉不填充）
     kCGPathStroke:         只有边框
     kCGPathFillStroke:     既有边框又有填充
     kCGPathEOFillStroke:   奇偶填充并绘制边框*/

//画贝塞尔曲线
    //二次曲线
    //设置起点
    CGContextMoveToPoint(context, 120, 300);
    //设置对贝塞尔曲线相关的控制点，控制点，终点坐标
    CGContextAddQuadCurveToPoint(context, 190, 310, 120, 390);
    CGContextStrokePath(context);

    //三次曲线
    //设置起点
    CGContextMoveToPoint(context, 120, 300);
    //设置对贝塞尔曲线相关的控制点，控制点1，控制点2，终点坐标
    CGContextAddCurveToPoint(context, 250, 280, 250, 400, 280, 300);
//    CGContextStrokePath(context);两种方法都可以
    CGContextDrawPath(context, kCGPathStroke);

//图片
    UIImage *image = [UIImage imageNamed:@"bird"];
    [image drawInRect:CGRectMake(60, 340, 50, 50)];
    //颠倒图片
//    CGContextDrawImage(context, CGRectMake(60, 400, 50, 50), image.CGImage);
    //平铺图片
//    CGContextDrawTiledImage(context, CGRectMake(0, 0, 40, 40), image.CGImage);

part3:demo效果如下图

//利用贝塞尔曲线画各种图形
- (void)drawRect:(CGRect)rect {

    //UIBezierPath
    //画圆
    UIBezierPath *p = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 80, 80) cornerRadius:40];
    //填充
//    [[UIColor greenColor] setFill];
//    [p fill];
    //画框
    [[UIColor greenColor] setStroke];
    [p stroke];

    //画矩形
    UIBezierPath *p2 = [UIBezierPath bezierPathWithRect:CGRectMake(120, 20, 100, 120)];
    [[UIColor yellowColor] setFill];
    [p2 fill];

    //分割圆
    UIBezierPath *p3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(300, 100) radius:50 startAngle:M_PI_2 endAngle:M_PI clockwise:NO];
    [[UIColor redColor] setFill];
    [p3 fill];

    //画椭圆
    UIBezierPath *p4 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(200, 200, 150, 100)];
    [[UIColor blueColor] setFill];
    [p4 fill];

}