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(三十)UI之Quartz2D画图片画文字

回头看了看自己写的博客,猫猫决定以后更改风格 本意是想大家看效果直接拷贝代码能用,注释齐全也方便学习,但是发现这样对新手学习特别困难,以后素材源码不会上传了,有想要的可以去群里找。 以后风格基本是...
  • u013357243
  • u013357243
  • 2015年05月05日 11:28
  • 2150

iOS Quartz2D 绘制简单图形--线,圆,弧线,贝塞尔曲线,文字

本文代码参考:http://www.cnblogs.com/kenshincui/p/3959951.html Quartz2D绘制2D图形          在iOS中常用的绘图框架就是Quartz...
  • xy_26207005
  • xy_26207005
  • 2016年05月25日 10:43
  • 3083

iOS 2D绘图详解(Quartz 2D)之概述

原创Blog,转载请注明出处 http://blog.csdn.net/hello_hwc?viewmode=list 我的stackoverflow前言:最近在研究自定义控件,由于想要彻底的...
  • Hello_Hwc
  • Hello_Hwc
  • 2015年10月21日 11:55
  • 3207

iOS Quartz2D基本图形绘制(一)

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

iOS之基本图形绘制Quartz2d的的使用

图形绘制Quartz2d的的使用
  • u011146511
  • u011146511
  • 2016年04月28日 21:49
  • 134

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

Quartz 2D介绍及基本图形绘制
  • ppdyhappy
  • ppdyhappy
  • 2015年09月14日 16:57
  • 413

Quartz2D - 基本图形绘制(线条)

Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,里面有各种各样的UI控件 UILabel:显示文字 UIImageView:显示图片 UIBu...
  • github_26672553
  • github_26672553
  • 2016年03月06日 15:00
  • 380

Quartz 2D之基本图形绘制

-(UIImage *)drawImageAtImageContext{ //获得一个位图图形上下文 CGSize size=CGSizeMake(300, 188);//画...
  • longshihua
  • longshihua
  • 2016年01月12日 16:35
  • 581

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

Quartz2D的基本概念与基本使用,供初学者一起学习
  • sacrifice123
  • sacrifice123
  • 2015年10月22日 09:28
  • 280

Quartz2D - 基本图形绘制(形状)

1.空心圆圈 // 创建 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20...
  • github_26672553
  • github_26672553
  • 2016年03月06日 16:00
  • 462
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS Quartz2D的基本图形绘制
举报原因:
原因补充:

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