iOS Quartz2D的基本图形绘制

Quartz2D的基本功能介绍

drawRect方法的调用时机：

1.当View第一次被显示到屏幕的时候，系统会创建一个跟View相关的Layer上下文
2.系统会通过此上下文，在drawRect的方法中绘制好渲染到Layer上
3.如果要重新绘制，直接调用drawRect是无效的，我们需要调用setNeedsDisplay或者setNeedsDisplayInRect
4.而且setNeedDssplay或者setNeedsDisplayInRect不是立马调用的，而是在下一次屏幕刷新的时候把绘制上去的内容渲染出来

1.直线

-(void)drawNormalLine:(CGContextRef)ctx
{
// 设置起点
CGContextMoveToPoint(ctx, 50, 50);
// 设置重点
CGContextAddLineToPoint(ctx, 150, 50);
// 设置绘制线的宽度
CGContextSetLineWidth(ctx, 10);

//***********************设置颜色的三个方法******************//
// 设置线的颜色 方法1 参数为RGB的三个小数
//CGContextSetRGBStrokeColor(ctx, 1, 0.8, 0.03, 1);

// 设置线的颜色 方法2 参数是浮点RGBA数组
//const CGFloat f[] = {0.124,0.124,0.124,1};
//CGContextSetStrokeColor(ctx, f);

// 设置线的颜色 方法3 OC方法，简单粗暴
[[UIColor redColor] set];
//***********************设置颜色的三个方法******************//

// 设置线的样式为圆角
CGContextSetLineCap(ctx, kCGLineCapRound);
// 线是不能进行实心渲染的，小朋友要注意啦
//    CGContextFillPath(ctx);
// 渲染到Layer上（空心线）
CGContextStrokePath(ctx);
}

效果如下：



2.三角形

- (void)drawTriangle:(CGContextRef)ctx
{
// 绘制三角形
// 起点
CGContextMoveToPoint(ctx, 50, 100);
// 设置第二个点
CGContextAddLineToPoint(ctx, 150, 100);
// 设置第三个点
CGContextAddLineToPoint(ctx, 100, 200);
// 设置终点（此操作可以省略，只要执行了ClosePath，默认回到起点，也就是终点）
//    CGContextAddLineToPoint(ctx, 50, 100);
CGContextClosePath(ctx);
// 设置颜色
[[UIColor redColor] set];
// 渲染到Layer（空心）
//    CGContextStrokePat(ctx);
// 渲染实心
CGContextFillPath(ctx);
}

效果如下：



3.圆和四边形

// 园
- (void)drawCircle:(CGContextRef)ctx
{

// 第一个参数：上下文
// 第二个参数：圆心X轴
// 第三个参数：圆心Y轴
// 第四个参数：半径
// 第五个参数：开始弧度
// 第六个参数：结束弧度
// 第七个参数：圆弧方向（0 顺时针 1 逆时针）
CGContextAddArc(ctx, 250, 300, 50, 0, 2 * M_PI, 0);

CGContextStrokePath(ctx);

}
// 四边形
- (void)drawRectangle:(CGContextRef)ctx
{
// 绘制四边形，有现成的方法可以调用
CGContextAddRect(ctx, CGRectMake(50, 250, 100, 30));
// 设置颜色
[[UIColor greenColor] set];
// 空心绘制
//    CGContextStrokePath(ctx);
// 实心绘制
CGContextFillPath(ctx);
}

效果如下：



4.饼状图

// 饼状图
- (void)drawPie:(CGContextRef)ctx
{
// 起点
CGContextMoveToPoint(ctx, 230, 100);
// 绘制line长100的线
CGContextAddLineToPoint(ctx, 230, 200);
// 绘制圆 左边 230 100 半径 100 起点 m_pi,终点 -M_PI/3.2 逆时针
CGContextAddArc(ctx, 230, 100, 100, M_PI / 2, -M_PI/3.2, 1);
// 关闭路径
CGContextClosePath(ctx);
// 设置填充色
CGContextSetRGBFillColor(ctx, 0.5, 1, 0, 1);
CGContextFillPath(ctx);
}

效果如下：



5.画多个

-(void)drawFang:(CGContextRef)context

{//画一个 Rect
CGContextSetRGBStrokeColor(context, 255, 100, 100, 1);
CGContextSetLineWidth(context, 2.0);
CGContextAddRect(context, CGRectMake(50, 50, 200, 300));//画一个Rect

CGRect rcts[4];//画多个Rect
rcts[0] = CGRectMake(100, 100, 200, 200);
rcts[1] = CGRectMake(90, 110, 200, 200);
rcts[2] = CGRectMake(80, 120, 200, 200);
rcts[3] = CGRectMake(70, 130, 200, 200);
CGContextAddRects(context, rcts, 4);//代表要画4个rect

CGContextStrokePath(context);
}

6.以上是传统的方式，来一个用UIBezierPath重绘

// 用贝塞尔曲线画图
- (void)userUIBezierPathDraw
{
// 创建画圆形的对象
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 50, 50)];
// 设置填充颜色
[[UIColor greenColor] setFill];
// 填充
[path fill];
// 设置描边
[[UIColor blackColor] setStroke];
// 描边
[path stroke];

UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 20, 50, 50)];
[[UIColor greenColor] setFill];
[path2 fill];
[[UIColor blackColor] setStroke];
[path2 stroke];

// 创建画曲线的贝塞尔对象
UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(85, 85) radius:30 startAngle:0 endAngle:M_PI clockwise:YES];
// 宽度
path3.lineWidth = 10;
// 颜色描边
[[UIColor redColor] setStroke];
[path3 stroke];

// 画个波浪线
UIBezierPath *path4 = [UIBezierPath bezierPath];
[path4 moveToPoint:CGPointMake(20, 200)];
// 参数1 终点
// 参数2 控制点1
// 参数3 控制点2
[path4 addCurveToPoint:CGPointMake(335, 300) controlPoint1:CGPointMake(160, 0) controlPoint2:CGPointMake(200, 600)];
path4.lineWidth = 5;
path4.lineCapStyle = kCGLineCapRound;
[path4 stroke];
}

效果如下：



OK~~~~~~~~~~~~~~~