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

效果图：