iOS Quartz2D的基本图形绘制

原创 2016年05月30日 17:10:57

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~~~~~~~~~~~~~~~


版权声明:本文为博主原创文章,未经博主允许不得转载。转载请Email我.......

相关文章推荐

iOS Quartz2D基本图形绘制(一)

1. Quartz2D简介Quartz2D是二维的绘图引擎(经包装的函数库,方便开发者使用。也就是说苹果帮我们封装了一套绘图的函数库),用Quartz2D写的同一份代码,既可以运行在iphone上又可...

Quartz2D使用之基本图形绘制(一)

Quartz2D的基本概念与基本使用,供初学者一起学习

Quartz2D基本图形绘制

Quartz2D1.基本图形绘制有三大类 线 长方形 圆与扇形 以上三种进行代码分类,如图: 2.针对三类解释(解释在代码中) 线 #pragma mark - line //线的基本画法步骤 -(v...

Quartz 2D介绍及基本图形绘制

Quartz 2D介绍及基本图形绘制

iOS开发UI高级—38Quartz2D使用(绘制基本图形)

iOS开发UI篇—Quartz2D使用(绘制基本图形) 一、简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息、绘图状态...

Android的基本2D图形绘制

  • 2013年05月22日 23:14
  • 312KB
  • 下载

HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用

原文地址:http://www.jb51.net/html5/72250.html SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了,在这里就不多说了,感兴趣的朋友可以了...
  • TTO_OTT
  • TTO_OTT
  • 2015年03月17日 15:49
  • 843

Quartz2D---苹果官方的⼆维绘图引擎(绘制基本图形)

iOS开发UI篇—Quartz2D使用(绘制基本图形) 一、简单说明 Quartz 2D:是⼀个苹果官方的⼆维绘图引擎,同时支持iOS和Mac OS X系统(跨平台,Quartz 2D的API是...

Quartz2D 绘制基本图形

利用Quartz2D可以绘制出系统不能提供的各种图形, 比如饼状图, 柱状图, 以及各种曲线, 所以熟练使用Quartz2D绘图还是有必要的, 下面是绘制基本图形 // Quartz2D基本图形绘制...

ios基本图形绘制

一.框架的介绍     Core Graphics Framework是一套基于C的API框架,使用了Quartz(Quartz是苹果开发的API)作为绘图引擎。它提供了低级别、轻量级、高保真度的2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS Quartz2D的基本图形绘制
举报原因:
原因补充:

(最多只允许输入30个字)