UI进阶--Quartz2D绘制图形的基本使用

1、绘制线条：

1.1、在storyboard中拖拉一个view，并设置大小；

1.2、自定义一个类，继承自UIView，并与1.1中的view进行关联；

1.3、- (void)drawRect:(CGRect)rect方法中实现画线条：

//
//  LineView.m
//  Drawing
//
//  Created by xiaomoge on 14/12/30.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "LineView.h"

@implementation LineView

- (void)drawRect:(CGRect)rect {

    //获取上下文 上下文的输出目标就是self
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 设置线颜色
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1);
    
    // 设置线宽
    CGContextSetLineWidth(context, 13);
    
    // 设置线的头尾的样式
    CGContextSetLineCap(context, kCGLineCapButt);
    
    // 设置连接点的样式
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    //画一条线
    //设置一起点
    CGContextMoveToPoint(context, 10, 10);
    //设置连线另一个点
    CGContextAddLineToPoint(context, 30, 100);
    CGContextAddLineToPoint(context, 110, 110);
    
    //渲染
    CGContextStrokePath(context); 
}
@end

效果图：

2、绘制三角形、矩形：

基本步骤和1一样：

代码：

//
//  LineView.m
//  Triangle
//
//  Created by xiaomoge on 14/12/30.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "LineView.h"

@implementation LineView
- (void)drawRect:(CGRect)rect {
    [self drawTriangle];
    [self drawRectangle];
}
#pragma mark - 画三角形
-(void)drawTriangle{
    //获取上下文 上下文的输出目标就是self
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 设置线颜色
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1);//RGB颜色
    //设置起点
    CGContextMoveToPoint(context, 10, 10);
    //设置另外三个点
    CGContextAddLineToPoint(context, 110, 10);
    CGContextAddLineToPoint(context, 110, 110);
    //CGContextAddLineToPoint(context, 10, 10);
    //关闭路径
    CGContextClosePath(context);
    
    // 渲染
    CGContextStrokePath(context);
}
#pragma mark -  画矩形
-(void)drawRectangle{
    //获取上下文 上下文的输出目标就是self
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 设置线颜色
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0.0, 1);
    
    // 设置线宽
    //CGContextSetLineWidth(context, 13);

    // ＝＝＝＝＝＝＝第一方法＝＝＝＝＝＝＝＝＝＝＝＝
    //    //设置一起点
    //    CGContextMoveToPoint(context, 70, 10);
    //    //设置另外三个点
    //
    //    CGContextAddLineToPoint(context, 110, 10);
    //    CGContextAddLineToPoint(context, 110, 110);
    //    CGContextAddLineToPoint(context, 10, 110);
    //    CGContextAddLineToPoint(context, 10, 10);
    
    // ＝＝＝＝＝＝＝第二种方法＝＝＝＝＝＝＝＝＝＝＝＝
    CGContextAddRect(context, CGRectMake(70, 10, 100, 100));
    
    //[渲染]
    //空心效果
    CGContextStrokePath(context);
    
    //实心效果
    //CGContextFillPath(context);
}

@end

效果图：

3、绘制圆、弧、扇形：

基本步骤和1一样：

代码：

//
//  Circle.m
//  Circle
//
//  Created by xiaomoge on 14/12/30.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "LineView.h"

@implementation LineView

- (void)drawRect:(CGRect)rect {
    // Drawing code
    [self drawSector];
    [self drawArc];
    [self drawCircle];
}

#pragma mark 画弧
-(void)drawArc{
    //图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    /**
     *CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y,
     CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
     *x,y 圆心
     *radius 半径
     *startAngle 画弧的起始位置
     *endAngel 画弧的结束位置
     * clockwise 0 顺针 1 逆时针
     */
    CGContextAddArc(context, 120, 150, 60, 0, M_PI, 1);
    //关闭路径
    CGContextClosePath(context);
    
    //渲染
    CGContextStrokePath(context);
    //CGContextFillPath(context);
}

#pragma mark - 画扇形
-(void)drawSector{
    //图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //设置一个起点
    CGContextMoveToPoint(context, 100, 100);
    
    CGContextAddArc(context, 100, 100, 60, - M_PI_4, - 3 * M_PI_4, 1);
   
    CGContextClosePath(context);
    
    CGContextStrokePath(context);
}

#pragma mark 画圆
-(void)drawCircle{
    //图形上下文  
    CGContextRef context = UIGraphicsGetCurrentContext();

    //画圈
    CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 100));
    
    //渲染
    CGContextStrokePath(context);
}
@end

效果图：