Quarz2D基础(一)

• Quarz2D可以实现以下内容:

绘制图形:线条/三角形/矩形/圆/弧形/扇形等

绘制文字

绘制/生成图片

读取/生成PDF

截图/裁剪图片

自定义UI控件

• Quarz2D绘制四大步骤:

1.获取当前view的图形上下文

2.描述路径

3.将路径添加到上下文

4.渲染上下文

• Quarz2D只能在DrawRect方法中实现(需自定义View)

第一种绘制方法:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    //设置起点
    CGPathMoveToPoint(path, NULL, 100, 100);
    //设置终点
    CGPathAddLineToPoint(path, NULL, 200, 200);
    //将路径添加至图形上下文
    CGContextAddPath(ctx, path);
    //渲染上下文
    CGContextStrokePath(ctx);
}

效果图:

第二种绘制方法:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置起点
    CGContextMoveToPoint(ctx, 100, 100);
    //设置终点
    CGContextAddLineToPoint(ctx, 200, 100);
    //渲染到图形上下文
    CGContextStrokePath(ctx);
}

效果图:

第三种绘制方法:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //创建路径
    UIBezierPath *path = [[UIBezierPath alloc] init];
    //设置起点
    [path moveToPoint:CGPointMake(50, 100)];
    //设置终点
    [path addLineToPoint:CGPointMake(100, 100)];
    //渲染上下文
    [path stroke];  
}

效果图:

绘制多条路径:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置起点
    CGContextMoveToPoint(ctx, 100, 100);
    //设置终点
    CGContextAddLineToPoint(ctx, 200, 100);
    //设置终点
    CGContextAddLineToPoint(ctx, 150, 150);
    //渲染到图形上下文
    CGContextStrokePath(ctx); 
}

效果图:

使用UIBezierPath绘制多条路径:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //创建路径
    UIBezierPath *path = [[UIBezierPath alloc] init];
    //设置起点
    [path moveToPoint:CGPointMake(50, 100)];
    //设置终点
    [path addLineToPoint:CGPointMake(100, 100)];
    //渲染上下文
    [path stroke];
    //创建路径
    UIBezierPath *path1 = [[UIBezierPath alloc] init];
    //设置起点
    [path1 moveToPoint:CGPointMake(100, 50)];
    //设置终点
    [path1 addLineToPoint:CGPointMake(150, 150)];
    //渲染上下文
    [path1 stroke];
}

效果图:

设置路径样式:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置起点
    CGContextMoveToPoint(ctx, 100, 100);
    //设置终点
    CGContextAddLineToPoint(ctx, 200, 100);
    //设置终点
    CGContextAddLineToPoint(ctx, 150, 150);
    //设置颜色
    [[UIColor redColor] set];
    //设置线宽
    CGContextSetLineWidth(ctx, 10);
    //设置线样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    //渲染到图形上下文
    CGContextStrokePath(ctx);
}

效果图:

使用UIBezierPath设置样式:

- (void)drawRect:(CGRect)rect {
    // Drawing code
  UIBezierPath *path = [[UIBezierPath alloc] init];
    //设置起点
    [path moveToPoint:CGPointMake(50, 100)];
    //设置终点
    [path addLineToPoint:CGPointMake(100, 100)];
    //设置红色
    [[UIColor redColor] set];
    //渲染上下文
    [path stroke];
    //创建路径
    UIBezierPath *path1 = [[UIBezierPath alloc] init];
    //设置起点
    [path1 moveToPoint:CGPointMake(100, 50)];
    //设置终点
    [path1 addLineToPoint:CGPointMake(150, 150)];
    //设置橙色
    [[UIColor orangeColor] set];
    //渲染上下文
    [path1 stroke];
}

效果图:

绘制曲线:

- (void)drawRect:(CGRect)rect {
    //创建路径
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置起点
    CGContextMoveToPoint(ctx, 20, 20);
    //绘制曲线                       控制点x 控制点y 终点x 终点y
    CGContextAddQuadCurveToPoint(ctx,  50,   50,  20,  100);
    //渲染上下文
    CGContextStrokePath(ctx); 
}

效果图:

绘制图形:

- (void)drawRect:(CGRect)rect {
    //绘制矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 100, 100)cornerRadius:20];
    //描边
    [path stroke];
    //填充
    [path fill];
}

效果图:

描边 填充

绘制圆形:

- (void)drawRect:(CGRect)rect {
    /*
    Center:圆心
    startAngle:弧度
    clockwise:YES:顺时针 NO:逆时针
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    //描边
    [path stroke];
    //填充会自动补齐路径
    [path fill];
}

效果图:

绘制圆弧:

- (void)drawRect:(CGRect)rect {
    /*
    Center:圆心
    startAngle:弧度
    clockwise:YES:顺时针 NO:逆时针
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    //描边
    [path stroke];
    //填充会自动补齐路径
    [path fill];
}

效果图:

闭合弧形路径:

- (void)drawRect:(CGRect)rect {
    /*
    Center:圆心
    startAngle:弧度
    clockwise:YES:顺时针 NO:逆时针
     */
    CGPoint center = CGPointMake(50, 50);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    //描边
    [path addLineToPoint:center];
    //关闭路径(关闭路径方式1)
    [path close];
    //填充会自动补齐路径(关闭路径方式2)
    [path fill];
}

效果图: